Вью v если не чтение переменной

Question

Я использую Vue 2 на Laravel 5.3 (с использованием bxslider для карусельного) Следующий код дает мне одно изображение (img1) слайдер. Если я удалю v-if s, он даст мне 3 изображения (с img1img2img3 в слайдере). productChoiceSelected.img2 возвращает true, если это не null из базы данных?

EDIT (добавлен полный код компонента)

<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> 

EDIT # 2 Я думаю, это потому, что productChoiceSelected.img2 является каталогом URL? это http://localhost:8000/img/products/1-2.bmp

Answer 1

я могу выяснить несколько вопросов, в вашем коде:

1. Вы должны иметь img1 и эти переменные, определенные как они должны быть установлены реактивно, которые будут использоваться в вю шаблонный.
2. Вам нужно переместить код $('.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 
      } 
      }); 
      }, 
    ...... 
    ...... 
    ......