2

I am having trouble to understand how to pass a value to vue through html, it always gives me this error: Interpolation inside attributes has been removed. Use v-bind or the colon shorthand instead

Edit: I want to pass the value "country" to the vue instance, this does not work, can someone give me an example on HTML and vue side please??

This is my code:

HTML

<div id="image-slider" :country="@{{country}}">
<template id="slider-template">
<p>
<a class="featured-providers-arrow-left" @click="prevRow"><img src="{{route('cacheImage', ['newDesign', 'arrow.png']) }}"/></a>
</p>
<a class="featured-providers-arrow-right" @click="nextRow"><img src="{{route('cacheImage', ['newDesign', 'arrow.png']) }}"/></a>
</template>
</div>

VUE

new Vue({
el: '#image-slider',
  data: {
    providers: []
  },
  mounted(){
    this.country = this.$el.attributes.country.value;
    this.$http.get('/provider-' + this.country).then(response => response.data = this.providers);/*this.providers = response.data);*/
  },
  currentNumber: 0,
  timer:null
}
Benny
  • 839
  • 16
  • 32

1 Answers1

3

Text interpolations are no longer supported in Vuejs. As explained here:

###Interpolation within Attributes removed

Interpolation within attributes is no longer valid.

For example:

<button class="btn btn-{{ size }}"></button>

Should either be updated to use an inline expression:

<button v-bind:class="'btn btn-' + > size"></button>

So, this basically means unlike in Vuejs 1.x where this syntax would be valid:

<img src="{{someValue}}">

In 2.x it is no longer supported. So you must change it to:

<img :src="someValue">
tony19
  • 125,647
  • 18
  • 229
  • 307
samayo
  • 16,163
  • 12
  • 91
  • 106
  • Not entirely, I have this value here now: :country="{{ $country }}" as in my code where $country is an object in the style of country => 'string' I want to pass this object to vue, however if for example the string is 'Sweden' it gives me this error message: "[Vue warn]: Property or method "sweden" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. But the property I want to pass is the object not the value "sweden" what do I need to do here? – Benny Nov 09 '17 at 18:08
  • You can't do `:country` the colon must be attached to known html attributes like `value`, `src`, `class`, `disabled` etc... if you want to use/pass data called `country` you have to pass it like this `:data-country='country'` – samayo Nov 10 '17 at 08:34
  • I tried using :data-country='country' but I received the same error, it seems to be quite complicated to pass a simple object value to vue using blade ..... :((( – Benny Nov 15 '17 at 03:34
  • Do you maybe have a fiddle for me? :)) – Benny Nov 15 '17 at 03:40
  • You want to get the country? – samayo Nov 15 '17 at 08:13
  • I want to pass an object along these lines here: ['country' => "sweden"] So 'sweden' as a string should be passed to the vue instance – Benny Nov 15 '17 at 20:32