Vue v-if not reading variable

Question

I am using Vue 2 on Laravel 5.3 (using bxslider for carousel) The following code gives me a single image (img1) slider. If I remove v-ifs it does give me 3 image (with img1 img2 img3 in the slider). Does productChoiceSelected.img2 returns true if it is not null from the database?

EDIT (added full code of the component)

    <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 I guess it is because productChoiceSelected.img2 is a url directory? it is http://localhost:8000/img/products/1-2.bmp

Answer 1

I can figure out few issues in your code:

1. You need to have img1 and these variables defined as these are to be set reactively to be used in vue templated.
2. You need to move $('.bxslider').bxSlider({}) code in the updated section as this needs to be executed once you get the data updated from backend.

Following are code changes:

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

see updated fiddle.

Answer 2

Thanks for saurabh contribution above, as I am still unsure where the problem is, here is how I solve the problem by myself for you guys' reference.

Change in code:

      <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
            }
            });
          },
    ......
    ......
    ......