[Vuejs]-Why isn't the value of the object properties inserted here?

by

3👍

✅

You’ve got this in your template:

<li :text="item"></li>

This will bind the text attribute to the value, outputting, e.g.:

<li text="itemA"></li>

You should be able to see this in the developer tools. In the picture you posted you hadn’t expanded the relevant elements so the attributes can’t be seen.

I assume what you want is to set the content. For that you’d either use v-text:

<li v-text="item"></li>

or more likely:

<li>{{ item }}</li>

Either of these will output:

<li>itemA</li>

On an unrelated note, I would add that this line will create multiple lists:

<ul v-for="item in items">

It’s unclear if that’s what you want. You’re going to create 3 <ul> elements, each with a single <li> child. If you want to create a single <ul> then move the v-for onto the <li>.

👤skirtle

Leave a comment