CODEWITHSUNDEEP
javascriptdata-bindingvue.js
Willing Master
Willing Master

Reputation: 91

Data binding issue with Vue.js

target html with data binding

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <div class="row" v-for="test in tests">
     <div class="col-12">
        <router-link tag="a" :to="{ name:'test.index', params:{ id: test.id } }" >{{ test.name }}
        </router-link>
     </div>
     <div class="col-12">
         <img :src="(isTestURL && isPosted) ? '~/img/'+ 'testflow-img':'' + '.png'" class="img-fluid" />
      </div>
   </div>

Webpack mix config

mix.webpackConfig({
  resolve: {
    alias: {
      masonry: "masonry-layout",
      isotope: "isotope-layout",
      // custom aliases for easy reference
      src: path.resolve(__dirname, "resources/assets/"),
      assets: path.resolve(__dirname, "resources/assets/assets/"),
      img: path.resolve(__dirname, "resources/assets/assets/img/")
    }
  },

I can see the result of img/testflow-img.png, and no rendering. Like this example.com/img/testflow-img.png.

/images/testflow-img.png?1a2086faf6b06b086b9f10c5cc50eae2

Please follow any suggestions.

Upvotes: 0

Views: 71

Answers (1)

Willing Master
Willing Master

Reputation: 91

With your webpack config, your codeline is not available to render to public\images directory.

Maybe you'd use v-if instead of Conditional operator like this

<div class="col-12" v-if = "isTestURL && isPosted">
     <img :src="~/img/testflow-img.png" class="img-fluid" />
</div>

Upvotes: 1

Related Questions