V-if 在组件道具上答案

【问题标题】：V-if on a component propsV-if 在组件道具上
【发布时间】：2019-02-20 02:05:14
【问题描述】：

我正在定义一个模板如下：

Vue.component('card', {
   props: ['id','image','title','date', 'category'],
   template: `
   <a :href="link">
    <div class="card">
      <div class="card-image">
        <figure class="image is-4by3">
          <img :src="image" alt="Placeholder image">
        </figure>
      </div>
      <div class="card-content">
        <div class="content">
            {{title}}
          <br>
          <time>{{date}}</time>
        </div>
       </div>   
    </div>
   </a>
   `,
   computed: {
    link: function (){
        return "/article.php?id=" + this.id
    }
   }
})

new Vue ({
  el: '#root',
  data: {
    selected: '',   
  },
})

并在我的 php 文件中使用：

echo '<div class="column">
 <card id="'.$articles[$index]['id'].'" image="'.$articles[$index]['image'].'" category="'.$articles[$index]['category'].'" title="'.$articles[$index]['title'].'" date="'. date("F j, Y, g:i a",strtotime($articles[$index]['date'])).'">
 </card>
 </div>';

我想从卡片的v-if属性类别==从视图中选择属性。我尝试将 v-if 放在任何地方，在 php 中，在模板中，我还尝试将 category 定义为响应属性，但看起来没有什么合适的。

【问题讨论】：

标签： javascript php vue.js

【解决方案1】：

你必须在父组件上调用 v-if

echo '<div class="column">
 <card v-if="!selected || selected === '."'".$articles[$index]['category']."'"." id="'.$articles[$index]['id'].'" image="'.$articles[$index]['image'].'" category="'.$articles[$index]['category'].'" title="'.$articles[$index]['title'].'" date="'. date("F j, Y, g:i a",strtotime($articles[$index]['date'])).'">
 </card>
 </div>';

new Vue ({
  el: '#root',
  data: {
    selected: 'someInitialValue',   
  },
})

【讨论】：

它不工作，什么也没有出现。我认为是因为在渲染完成时 selected 是一个空值
有道理，您必须在数据属性中将其设置为默认值
但这不是说只会生成category id和我的默认值相同的item吗？
你也可以v-if="!selected || selected === '."'".$articles[$index]['category']."'"