时间戳

首页 > 解决方案 > V-if 在组件道具上

javascript - V-if 在组件道具上

问题描述

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

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 中，在模板中，我还尝试将类别定义为反应属性，但看起来没有什么是合适的。

标签： javascriptphpvue.js

解决方案

您必须在父组件上调用 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',   
  },
})

推荐阅读