属性内的插值已被删除。改用 v-bind 或冒号简写[重复]

Question

我很难理解如何通过 html 将值传递给 vue，它总是给我这个错误：属性内的插值已被删除。改用 v-bind 或冒号简写

编辑：我想将值“country”传递给 vue 实例，这不起作用，有人可以给我一个关于 HTML 和 vue 方面的例子吗？

这是我的代码：

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
}

Answer 1

Vuejs 不再支持文本插值。 As explained here：

删除属性内的插值

属性内的插值不再有效。

例如：

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

应该更新 使用内联表达式：

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

---

所以，这基本上意味着与 Vuejs 1.x 中的语法不同：

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

在 2.x 中不再支持它。所以你必须把它改成：

<img :src="someValue">