Question

我写了一个小组件来抽象一些重复的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-...属性的事情需要以其他方式完成，但是我还不知道如何。

Answer 1

解决方案是：

<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>

在Vue组件中参数化v模型

1 个答案: