vue.js - 我想把input里的值转到{{message}}里该怎么做

问题描述

问 题

下面的代码是我根据教程修改的，但是不知道哪里写错了，提示类似value不存在的字样。

<input id="god_level" class="weui_input" type="text" placeholder="请输入等级" v-model="message" />
<div id="test">
  <button class="weui_btn weui_btn_primary" v-on:click="showData">提交</button>
  <input id="TT3" type="text" v-model="input2"/>
  <p>{{ message }}</p>
</div>

我是想用VUE实现点提交后，#god_level的值给到input2的同时把值复制一份到message里的！

new Vue({
  el: '#test',

  data: {
    message: null,
    input2:""
    },

  ready: function(){ this.showData() },

  methods:{
    showData: function(){
      jQuery.ajax({
        type:'Get',
        url:'ajax.php',
        success:function(data){
          data=JSON.parse(data);
          var level = $("#god_level").val();
          var i = 0,length = data.length;
                for(;i<length;i++){
                  if(data[i].level==level){
                    // var temp = $('#TT3').val(data[i].total);
                    this.message = this.input2.value(data[i].total);
                    // this.message = this.$refs.input1.value(data[i].total);
                    break;
                    }
                }
          }
        })
      }
    }
})

但是我想是不是我哪里想错了 或许可以不这么写!!!

提示有这个错误！！！

解决方案

用的是vue1 还是vue2?

vue2中没有ready钩子

https://cn.vuejs.org/v2/guide...生命周期图示

还可以用computed计算属性或watch观察来实现
https://cn.vuejs.org/v2/guide...
下面是使用 computed 的例子
https://jsfiddle.net/ycloud/h...

这篇关于vue.js - 我想把input里的值转到{{message}}里该怎么做的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！