VUEJS V-FOR 行为怪异

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) }

（配置文件数据来自 api 响应）

我在其他两个页面中做了完全相同的事情（只是渲染了不同的对象）并且成功了。使用此代码，在控制台中我得到 value is undefined。如果我删除 :key="value.id"（它在编辑器中变为红色，但它仍然有效），而不是我只键入 {{ value }}} 的列表项，那么对象属性将被呈现（但以丑陋的格式js 对象）。怎么可能？我究竟做错了什么？谢谢

Answer 1

将 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 2

即使 profileData 有数据，您的 v-if 也永远不会显示，因为您无法直接检查 javascript.

中对象的长度

几件事：

您无法检查对象的长度，它会 return 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 进行迭代。我会使用计算属性和 return 一个数组，然后遍历它。对象反应性在 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 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án S. Basave 的建议。感谢任何试图提供帮助的人。 x

VUEJS V-FOR 行为怪异

VUEJS V-FOR acting weird

vuejs2

v-for