3π
I think that you are misunderstanding some parts of the vue syntax.
How to access properties of an object:
You just need to write {{ car.model }}
to access a property of an object.
How to iterate through an array in a template:
If you want to display all the cars
in your template, you should write:
<div v-for="car in cars">
{{ car }}
</div>
As you see, the v-for
directive allows you to iterate through an array.
What is v-model
?
v-model
is used to bind a variable to an input or a component.
<template>
<div>
<input type="text" v-model="foo" />
</div>
</template>
<script>
export default {
data () {
return {
foo: 'bar'
}
}
}
</script>
In that case, the foo
property will be bound to the input text.
Last point:
In your case, to make it work, you also need to create a root element for your template, because a template canβt have multiple root elements:
<template>
<div>
<div v-for="car in cars">
{{ car }}
</div>
</div>
</div>
0π
I found the answer.
I just have to type property separated by β.β. Like for example {{cars.model}}.
<template id="compo2">
<div>
<div>
{{ field.name }}
</div>
<div>
Received: {{ field }}
</div>
</div>
</template>
Example:
https://jsfiddle.net/zuhb7s8q/3/
- [Vuejs]-How to refer to a private variable declared in <script> in <script setup>
- [Vuejs]-Why is this :class="{}" not working? vueJs