I'm trying to learn vue and hit a small roadbump - is there a way for me to make this work? I want to push a new value into my items array with my Button component so then i can render it with the v-for. I know it would much be easier to put everything into one file, just curious if it can be done this way. Here is the code:
https://codesandbox.io/s/mystifying-antonelli-7o6m6o?file=/src/App.vue
any help would be much appreciated :)
Sure this can be done the way you would like. One way to do it is to define the variables and the add function in the App.vue.
<script setup>
import { ref } from "vue";
const name = ref("");
const amount = ref(0);
const items = ref([]);
const addItem = () => {
items.value.push = { name: name.value, amount: amount.value };
name.value = "";
amount.value = 0;
};
</script>
Bind name and amount with your inputs via v-model and bind addItem to your button with @click. You can use items as a prop for your ItemList component.
Your components need changes to work, but I hope this will give you some direction. Perhaps first make it work with plain html input and button elements and use {{ items }} to render the items array. Once that works you can create the custom components.
Hope this helps.