如何使用 html 输入元素值初始化 Vue data()答案

【问题标题】：How to initialize Vue data() using html input element value如何使用 html 输入元素值初始化 Vue data()
【发布时间】：2021-07-06 01:52:19
【问题描述】：

我正在尝试使用呈现的 input 标记中的值初始化 Vue data()。我知道可以使用 v-model="[data-key-hereinput 标记值从 data() 获取数据/em>]" 在 Vue.有没有办法使用 Vue 中 input 标签的值来初始化 data() 中的数据？

代码示例

<template>
  <input v-model="car_name">
  <input v-model="car_weight" value="40">
</template>

<script>
  export default{
    data(){
      return{
        car_name: "Range Rover",
        car_weight: null
      }
    }
  }
</script>

【问题讨论】：

你能分享一个代码示例来详细说明你的意思吗？
@KeithM，我正在寻找一种在 script 标记中使用 input 中的 value=40 来初始化 car_weight 的方法b> 标签
在 vue 中的 data() 初始化之前，你真的可以访问 html 输入元素吗？如果不是（我怀疑），那么正如您所提到的，输入标签值（使用 v-model="car_weight"）可以来自数据。我不明白您如何/为什么需要这样做......要执行您想要的操作，请从输入中删除“值”标签并将值放入 Vue 数据中的数据结构中：car_weight: 40
我明白你在说什么，但我的逻辑是 input 值最初是使用父组件中的方法设置的，然后我希望该方法初始化子组件（表单的）数据或 input 值以一致地初始化数据。我正在寻找一种方法来实现这一点，我不知道是否可能。

标签： javascript vue.js input v-model vue-data

【解决方案1】：

据我了解，DOM 将基于 vuejs 数据模型进行渲染。为了设置输入字段的值，您可以初始化 VueJs 数据（在您的情况下为“car_weight”）并省去输入元素上的“值”标签。稍后，当您更改输入时，VueJs 数据将更新以反映这一点，因此：

<template>
  <input v-model="car_name">
  <input v-model="car_weight">
</template>
<script>
  ...
  data () {
    return {
      car_name: "Holden",
      car_weight: 40
    }
  }
</script>

..会给你你的初始值，当你在浏览器中改变输入时，数据会更新。

【讨论】：

【解决方案2】：

在 Vue.js 中，v-model 指令提供了 TWO-WAY 绑定。因此，在您的情况下，“car_name”是输入标签和数据（）的相同数据。你可以在这里阅读更多关于它的信息v-model click here 其他处理输入值到数据其监听输入事件的方式，例如：

<input @input="onInput" /> // tag in template

onInput(event){ // handler for event
this.inputValue = event.target.value; // setting your value with input value
}

在底层，它与我编写的 v-model 和代码的行为相同。关于这个，可以看这篇文章click here

【讨论】：