[Vuejs]-Display value emitted from Vue component

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>
πŸ‘€Hammerbot

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/

πŸ‘€Juan Lago

Leave a comment