代码之家 › 专栏 › 技术社区 › fadedbee

在Vue组件中参数化v模型

vue-component vuejs2 vue.js

fadedbee · 技术社区 · 7 年前

我编写了一个小组件来抽象一些重复的HTML:

<template>
  <div class="form-group">
    <label for="desc">{{label}}</label>
    <input id="desc" readonly type="text" class="form-control input-sm"
           v-model={{v_model}}/>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  props: {
    label: String,
    v_model: String
  }
}
</script>

<style scoped>
</style>

这就产生了错误:

Error compiling template: 

<div class="form-group"> 
  <label for="desc">{{label}}</label>
  <input id="desc" readonly type="text" class="form-control input-sm"
         v-model={{v_model}}/> </div>
- invalid expression: Unexpected token { in 

  {{v_model}}/

Raw expression: v-model="{{v_model}}/"

我期待着分配给 v-... 属性需要以其他方式完成,但我还不知道如何完成。

1 回复 | 直到 7 年前

fadedbee 7 年前

解决方案是:

<template>
  <div class="form-group">
    <label for="desc">{{label}}</label>
    <input id="desc" type="text" class="form-control input-sm"
           v-bind:value="value"
           v-on:input="$emit('input', $event.target.value)"
    />
  </div>
</template>

<script>
export default {
  name: 'FormGroup',
  props: {
    label: String,
    value: String
  },
  data: function() {
    return {
    }
  }
}
</script>

<style scoped>
</style>

推荐文章

4r60_ · 如何停止VueJS上的间隔?[副本]

4 年前

Park · Vuejs道具,路径较长

4 年前

Mathijs · vue-chartjs4中的混合气泡图和折线图

4 年前

roev · 大堆来自(物体)。forEach不使用vue。js

4 年前

haferje · Vue。用于计算属性重新渲染的js加载指示器

8 年前

Ready Dev · Axios一次发出多个请求(vue.js)

8 年前

JeanValjean · 如何在Vue中使用事件总线通过自定义事件传递数据。js 2

8 年前

dede.brahma · VueJs-元素UI el select:如何获取值父级和子级

8 年前

tzortzik · 如何使用vue路由器将对象作为道具传递?

8 年前

Tim · VueJS-迭代从AJAX调用返回的数据

8 年前