Question

我需要一个简单的v-for才能在列表中呈现对象属性。

<div
   v-if="profileData && profileData.length > 0"
>
  <ul
    v-for="value in profileData"
    :key="value.id"
  >
    <li>{{value.id}}</li>
  </ul>
</div>

在脚本中：

profileData: {},
created() { 
  const userId = this.$route.params.userId
  const currentUser = this.$store.getters.currentUser
  const profileData = this.$store.getters.profileData 
  console.log('profileData in seeProfile: ', profileData) }

（profileData来自api响应）

我在另外两个页面上做的完全一样（只是渲染了不同的对象），并且它起作用了。使用此代码，在控制台中，我得到了value is undefined。如果我删除了:key="value.id"（在编辑器中它变成红色，但仍然可以使用），并且我只键入了{{ value }}}而不是列表项，则呈现了对象属性（但格式为a） js对象）。怎么可能？我究竟做错了什么？谢谢

Answer 1

即使profileData有数据，您的v-if也不会显示，因为您无法直接在javascript中检查对象的长度。

几件事：

您无法检查对象的长度，它将返回undefined。如果必须使用对象，则必须检查Object.keys(obj).length。

let obj = {
  first: {
    name: "first",
    meta: "data"
  },
  second: {
    name: "second",
    meta: "data"
  }
};

console.log("Object.length is: ", obj.length);
console.log("Object.keys().length is: ", Object.keys(obj).length);

您很多余，不需要检查profileData及其长度（也不需要> 0），只需检查v-if="Object.keys(profileData).length"。如果对象的条目为零，则不会显示，因为if(0)为假。
我强烈建议您使用数组进行v-for迭代。我将使用计算的属性并返回一个数组，然后进行迭代。对象反应性在JS中不直观地起作用，因此当您尝试找出为什么视图中的内容没有更新的原因时，您会抓挠头。

computed: {
    listData() {
        let list = Object.values(this.profileData);
        return list;
    }
}

视图中：

<div v-if="listData.length"/>

此外，请勿将数组的入口索引用作:key，因为如果您有另一个带有v-for的数组，则模型中将有重复的键。我会使用类似v-for="(item, key) in list" :key="'list-item-' + key"

Answer 2

将v-for放在li上，而不是ul上。

<ul>
    <li v-for="value in profileData"
    :key="value.id">{{value.id}}</li>
</ul>

此外，如果您的profileData是对象而不是数组，则需要确定是否要遍历键或值。

<ul>
    <li v-for="value in Object.values(profileData)"
    :key="value.id">{{value.id}}</li>
</ul>

<ul>
    <li v-for="value in Object.keys(profileData)"
    :key="value.id">{{value.id}}</li>
</ul>

或使用Vue的默认行为。

<ul>
    <li v-for="(value,key) in profileData"
    :key="value.id">{{value.id}}</li>
</ul>

Answer 3

api已更改，因此工作代码与原始代码略有不同。这是模板：

<div
  v-if="listData.length"
>
  <ul>
    <li>Name: <b>{{ profileData.user.first_name }}</b></li>
    <li>Surname: <b>{{ profileData.user.last_name }}</b></li>
    <li>Username: <b>{{ profileData.user.username }}</b></li>
    <li>Car: <b>{{ profileData.if_cars_owned }}</b></li>
    <li v-if="profileData.if_cars_owned === true">
      Car model: {{ profileData.user_car_type }}
    </li> 
    <li v-if="profileData.if_cars_owned === true">
      Car power: {{ profileData.user_car_powered_by }}
    </li> 
    <li>Motorcycle: <b>{{ profileData.if_motorcycle_owned }}</b></li>
    <li v-if="profileData.if_motorcycle_owned === true">
      Motorcycle model: {{ profileData.user_motorcycle_characteristic }}
    </li>
  </ul>
</div>

脚本：

created(){
    const profileData = this.$store.getters.profileData
    this.profileData = profileData
    console.log('profile data in profilo: ', profileData)
  },

我也更新了

<div
  v-if="listData.length"
>

和脚本中

computed: {
    ...,
    listData() {
      let list = Object.values(this.profileData);
      return list;
    }
},

遵循@AdriánS. Basave的建议。感谢任何尝试提供帮助的人。 x

VUEJS V-FOR代理很奇怪

3 个答案: