Question

我有一个输入属性＆＃34; ref＆＃34;而且我不想使用v-model

<div class="form-group m-b-40">
  <input type="text" class="form-control" id="name" ref="name"  required> 
</div>
 {{showInput}}

我想自动显示输入值。我这样做

 methods: {
       showInput: function () {
            this.$refs.name.value
        },
    }

但它没有更新。

Answer 1

因为value的{{1}}不是可观察对象，除非它绑定到组件实例：

ref

然后给你的data() { return { name: '' } }一个input，现在它附有一个观察者

Answer 2

我无法理解你想做什么，但你做的方式似乎是错的。无论如何，你说我不想使用 v-model。

我将向您展示如何在没有v-model的情况下执行此操作，您可以从api获取输入值（您必须为此编写自己的代码）并将其设置为输入：

 <template>
    <div>
      <div class="form-group m-b-40">
        <input type="text" :value="text" @input="updateValue"> 
        <hr>
      </div>
      The input value is: {{text}}
    </div>
 </template>

<script>
export default {
  data() {
    return {
        text: ''
    }
  },
  created() {
    this.fetchFromApi()
  },
  methods: {
    updateValue(value) {
        let newValue = value.target.value
        this.text = newValue
    },
    fetchFromApi() {
        //write the code to get from API the input value and then:
      this.text = 'input value' //set the input value
    }
  }
}
</script>

See it in action here

如何在模板中使用$ refs - vuejs

2 个答案: