v-for在vue3中的工作原理

Question

我在vue3模板中有以下代码：

<a v-if="card.type == 'link'" :href="card.linkData.url">
        <img v-if="card.linkData.image" :src="card.linkData.image">
        <img v-else  :src="card.linkData.favicon">
</a>

代码获取一组用于firebase的卡片。它们的类型可能是'image‘、'note’或'link‘。通过使用v-for遍历数组，它会用它的信息呈现每一张卡片。

如果它们是'link‘类型，则它们包含一个名为linkData的对象。

我希望上面显示的代码位仅在卡是'link‘类型时显示。但是，当渲染'image‘或'note’类型的卡片时，我得到一个错误，说card.linkData是未定义的。

这正常吗？它需要读取card.linkdata吗，即使它不会渲染它？

我试过这样做：

<div v-if="card.type == 'link'">
   <a :href="card.linkData.url">
      <img v-if="card.linkData.image" :src="card.linkData.image">
      <img v-else  :src="card.linkData.favicon">
   </a>
</div>

但是错误仍然存在。

做这件事的正确方法是什么？

以下是从firebase获取的卡对象的示例：

{
  id: 1599762353,
  imageName: '',
  imageUrl: '',
  thumbnail: 'link to thumbnail',
  title: 'hello',
  content: 'a string of text',
  createdAt: 'date',
  type: 'note'
}

{
  id: 1599765625,
  imageName: '',
  imageUrl: '',
  thumbnail: 'link to thumbnail',
  title: 'hello',
  content: 'a string of text',
  createdAt: 'date',
  type: 'link',
  linkData: {
    link: 'https//:www.userlink.com',
    image: 'https//:www.linkimage.com',
    favicon: ''https//:www.linkicon.com'
    }
}

我还尝试给'image‘和'note’类型的卡片赋予'linkData: null‘属性，但现在错误是’card.linkData is null‘。

Answer 1

尝试如下代码片段(v-if="card.linkData && card.linkData.link">)：

​

new Vue({
  el: '#demo',
  data() {
    return {
      items: [
        {id: 1599762353, imageName: '', imageUrl: '', thumbnail: 'link to thumbnail',  title: 'hello note', content: 'a string of text', createdAt: 'date', type: 'note'},
        {id: 1599765625, imageName: '', imageUrl: '', thumbnail: 'link to thumbnail', title: 'hello', content: 'a string of text', createdAt: 'date', type: 'link', linkData: {link: 'https//:www.userlink.com', image: 'https://picsum.photos/70', favicon: 'https//:www.linkicon.com'}},
        {id: 1599765626, imageName: 'https://picsum.photos/50', imageUrl: '', thumbnail: 'link to thumbnail', title: 'hello', content: 'a string of text', createdAt: 'date', type: 'link',}
      ]
    }
  }
})

Vue.config.productionTip = false
Vue.config.devtools = false

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="demo">
  <li v-for="card in items" :key="card.id">
    <div v-if="card.type == 'link'">
        <a :href="card.linkData" v-if="card.linkData && card.linkData.link">
          <img v-if="card.linkData.image" :src="card.linkData.image">
          <img v-else :src="card.linkData.favicon">
        </a>
        <a :href="card.linkData" v-else>
          <img :src="card.imageName">
        </a>
    </div>
    <div v-else>
      <p>{{ card.title }}</p>
    </div>
  </li>
</div>

​