Question

我在Vue 2上使用Laravel 5.3（使用bxslider转盘）以下代码为我提供了单个图像（img1）滑块。如果我删除v-if s，则会为我提供3张图片（滑块中包含img1 img2 img3。如果数据库中不是productChoiceSelected.img2，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。编辑＃2 我想这是因为productChoiceSelected.img2是一个url目录？它是http://localhost:8000/img/products/1-2.bmp

Answer 1

我可以在代码中找出一些问题：

您需要img1并定义这些变量，并将其设置为被动地设置为在模板中使用。
您需要在更新的部分中移动$('.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-如果不是读变量

2 个答案: