Question

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

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放置在php中的模板中，也尝试将category定义为反应性属性，但是似乎没有合适的方法。

Answer 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',   
  },
})

V-如果在组件道具

1 个答案: