Level 104
The props should not be directly updated as it breaks the rule of one way data flow. Consider creating local state in the component using the prop as initial state.
1 like
Aug 9, 2023
7
Level 8
Updating props
This is the concept that I really want to understand how it's done. I don't know what keyword to search for so I thought ask it here.
How do you update a prop or props after a method call? The prop is passed from the backend directly to the component so it doesn't have a parent component.
Example when using Inertia
// server side
public function index(Request $request)
{
// assuming that we're getting a count from a query.
$counts = [
'total_users' => 10,
'total_orders' => 25,
];
return inertia('index', $counts);
}
// client side: index component
<script setup>
const props = defineProps({
counts: {
type: Object,
default: null,
},
});
const submit = async () => {
// after a successful response, update the `counts` prop.
};
Or using Laravel Blade template + Vue
// server side
public function index(Request $request): View
{
// assuming that we're getting a count from a query.
$counts = [
'total_users' => 10,
'total_orders' => 25,
];
return view('index', [
'counts' => $counts,
]);
}
// blade template
<index-component :counts="{{ Js::from($counts) }}"></index-component>
// client side: index component
<script setup>
const props = defineProps({
counts: {
type: Object,
default: null,
},
});
const submit = async () => {
// after a successful response, update the `counts` prop.
};
Level 8
@tykus I'll give this a read, sorry I'm new to Vue and I don't totally get what you're trying to say.
Do you mean, I'll re-assign the props to a ref?
Level 8
@tykus But in my case, the component where I show the counts doesn't have a parent component, the backend, and the blade template serve as the parent of it.
EDIT:
So, what I would do is make another method that will perform an API call or some endpoint that will return the updated count. And then call the newly created method after a successful response from the submit method.
const submit = async () => {
// after a successful response, update the `counts` prop.
await fetchUpdatedCounts();
};
const fetchUpdatedCounts = async () => {
const updatedCounts = await fetch('/get-updated-counts').then(response => response.json());
// Update the local counts
counts.value = updatedCounts;
}
Level 104
@NoLAstNamE you still want to avoid mutating the props directly.
1 like
Level 8
@tykus so I should declare another variable to hold the prop values?
Like this:
// inside onMounted
const someCounts = ref(props.counts)
Level 104
@NoLAstNamE yes exactly
1 like
Level 8
@tykus Thank you so much!
Please or to participate in this conversation.