Vue v-if 不读取变量

Question

我在 Laravel 5.3 上使用 Vue 2（使用 bxslider 轮播）以下代码为我提供了一个图像 (img1) 滑块。如果我删除 v-ifs 它确实会给我 3 张图片（滑块中有 img1 img2 img3）。 productChoiceSelected.img2 returns true 如果不是 null 来自数据库？

编辑（添加了组件的完整代码）

    <div class="col-md-4">
      <ul class="bxslider">
        <li>
          <img :src="productChoiceSelected.img1">
        </li>
        <li v-if="productChoiceSelected.img2">
          <img :src="productChoiceSelected.img2">
        </li>
        <li v-if="productChoiceSelected.img3">
          <img :src="productChoiceSelected.img3">
        </li>
      </ul>
    </div>

  </div>
</template>

<script>
  export default {
    data(){
      return{
        product:[],
        productChoiceSelected:[],
        productChoices:[]
      }
    },
    props:[
      'productId'
    ],
    mounted(){
      this.getProduct()
      this.getAllProductChoices()
    },
    methods:{
      getProduct(){
        var vm = this;
        vm.$http.get('/getProduct/'+vm.productId).then((response)=>{
          vm.product = response.data.data.product;
          vm.productChoiceSelected = response.data.data.productChoiceDefault;
        });
      },
      getAllProductChoices(){
        var vm = this;
        vm.$http.get('/getAllProductChoices/'+vm.productId).then((response)=>{
          vm.productChoices = response.data.data.productChoices;
        });
      }
    }
  }
</script>

编辑 #2 我猜这是因为 productChoiceSelected.img2 是一个 url 目录？这是 http://localhost:8000/img/products/1-2.bmp

Answer 1

我可以找出您代码中的几个问题：

您需要 img1 并且这些变量被定义为反应式设置以在 vue 模板化中使用。
您需要在更新部分移动 $('.bxslider').bxSlider({}) 代码，因为一旦您从后端获取更新数据，就需要执行此代码。

代码更改如下：

var demo = new Vue({
    el: '#demo',
    data: function(){
        return {
        productChoiceSelected: {
        img1:'',
        img2:'',
        img3:''
        }
      };
    },
    mounted(){
      this.getProduct()
    },
    updated(){
       $('.bxslider').bxSlider({});
    },
    methods:{
      getProduct(){
        var vm = this;
        setTimeout(function () {
          vm.productChoiceSelected.img1 = 'http://bxslider.com/images/730_200/hill_trees.jpg'
//          vm.productChoiceSelected.img2 =  'http://bxslider.com/images/730_200/houses.jpg'
          vm.productChoiceSelected.img3 =  'http://bxslider.com/images/730_200/hill_fence.jpg'

        }, 300)
      }        
    }
})

查看更新 fiddle。

Answer 2

感谢楼上saurabh的贡献，目前还不清楚问题出在哪里，下面是我自己解决问题的方法，供大家参考。

代码更改：

      <template>
        <div class="col-md-5">
          <div class="col-md-12">
            <ul class="bxslider">
              <li>
                <img :src="productChoiceSelected.img1">
              </li>
              <li v-if="img2">
                <img :src="productChoiceSelected.img2">
              </li>
              <li v-if="img3">
                <img :src="productChoiceSelected.img3">
              </li>
            </ul>
          </div>
        </div>
.....
.....
.....

        methods:{
          getProduct(){
            var vm = this;
            vm.$http.get('/getProduct/'+vm.productId).then((response)=>{
              vm.product = response.data.data.product;
              vm.productChoiceSelected = response.data.data.productChoiceDefault;
            if(vm.productChoiceSelected.img1){
              vm.img1 = true
            }
            if(vm.productChoiceSelected.img2 != null){
              vm.img2 = true
            }
            if(vm.productChoiceSelected.img3 != null){
              vm.img3 = true
            }
            });
          },
    ......
    ......
    ......

Vue v-if 不读取变量

Vue v-if not reading variable

laravel-5.3

vuejs2

bxslider