如何从相同的输入加载和更新？ (VUEJS)答案

【问题标题】：How to load and update from the same input? (VUEJS)如何从相同的输入加载和更新？ (VUEJS)
【发布时间】：2020-07-22 13:44:54
【问题描述】：

现在我在 span 标签中显示数据，以及更新它的输入

是否可以从 api 加载数据，将其加载到输入中，然后更新输入以将新信息发送回？哪种方式是最好的方法？

    <input v-model='name'> // see john and add john doe
    data(){
    return{
     name:''
    }},
    created(){
     this.data()
     },
    methods:{
    updateData(){
     // send the new name value to /updatename api
    },
    data(){
     this.name = api // john its the value
    }}

【问题讨论】：

标签： javascript html css vue.js vuejs2

【解决方案1】：

是的，这是可能的，首先您需要从服务器加载数据并将其放入您的 name 属性中，这是在创建的生命周期挂钩中创建的，然后在输入事件之后您需要将数据发送回服务器的方法。

<input v-model='name' @submit="setData()">

data(){
 return{
  name:''
 }},
async created() {
 await getData();
},
methods:{
 async getData(){
  this.name = await getApiFunction();
 }
 async setData(){
  await setApiFunction(this.name);
 }
}

【讨论】：

对不起，如果我解释不正确，我更新了问题
我认为这是你需要的，你不能在data()中调用api函数，所以你需要在组件创建过程中更新你的生命周期钩子方法中的prop
当然，这是一个严重的打字错误，是的，你赢了！顺便问一下，你对正则表达式有什么了解吗？请帮我解决这个问题stackoverflow.com/questions/62733767/…

【解决方案2】：

您可以添加一个name 观察者。每次name 的值发生变化时，它都会运行指定的代码：

<input v-model='name'>

data () {
  return {
    name: ''
  }  
},
watch: {
  name (value) {
    console.log(this.name)
  }
},
methods: {
  setAPIData () {
    this.name = 'API DATA'
  }
}

【讨论】：

对不起，如果我解释不正确，我更新了问题

【解决方案3】：

目前还不是很清楚您在寻找什么。我可以理解的是，您希望向用户显示当前值（名称）并让他们更新该值，这样做从 api 解析当前值并将其绑定到输入将是更好的选择。

模板：

<input v-model="name">

脚本：

module export{
    data(){
        return {
            name: ''
        }
    },
    created(){
      // parse current value for name using an api
      this.name = parsed_name
    },
    methods:{
       submit(){
           // on submit update name using an api
           // current value this.name
       }
    }
}

【讨论】：

对不起，如果我解释不正确，我更新了问题