Data binding issue with Vue.js

Question

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.

What about src attribute in rendered img? Can you inspect it via devTools? — donMateo
– donMateo, Commented Mar 17, 2018 at 21:46

Willing Master · Accepted Answer · 2018-03-24 15:33:20Z

1

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>

answered Mar 24, 2018 at 15:33

Willing Master

917 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

jwsoftwaregroup Over a year ago

also, do resolve all img with importing assets, maybe it'll be work with you.

Collectives™ on Stack Overflow

Data binding issue with Vue.js

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related