vue.js_v-model笔记

vue.js是一个非常精巧的js插件，我们可以利用v-model进行动态绑定input和textarea，通过其自身的内联函数来进行更新数据

但是当我们进行js改变input或textarea的value时，不会触发内联函数的动态响应，所以就要我们进行手动更新

话不多说上代码

php后台向模板传递apply对象

public function applyDetail($id)
{
    $data = [];
    $dqhAdminService = new DqhAdminService();
    $applyOpenMedias = $dqhAdminService->getApplyDetail($id);
    if ($applyOpenMedias) {
        $data['apply'] = [
            'id' => $id,
            'name' => $applyOpenMedias->name,
            'refuse_reason' =>$applyOpenMedias->refuse_reason
        ];
        return view('admin')->with('data', json_encode($data))->with('status', $data['apply']['status']);
    }
    return view('admin')->with('data', json_encode($data));
}





模板中进行值的获取

    
    

     
     


    
    

    
    

     
     


    
    

    
    

     
     


    
    

    
    


     
     
<span class="right">
    <input type="text" id = "ReasonId" class="input" v-model="apply.refuse_reason" @if($status != 1) readonly @endif>
</span>

     
     


     
     


     
     


     
     


     
     


     
     
对应js的获得和改变

     
     


      
      
<script>
    var dtJson =
            {!! $data !!}
                   var app = new Vue({
                el: '#main',
                data: {}
            });
    document.onload = function () {

        app.$set('apply', dtJson['apply']);
        $('#save_edit').click(function () {
            app.apply['refuse_reason']=$('#ReasonId').val();//可以利用 app.apply['refuse_reason']来获取对应的值进行手动改变
            if(app.$get('apply.intro').length==0){
                alert('空');
                return false;
            }
            $.post('/admin/' + app.$get('apply')['id'], app.$get('apply'), function (data) {
                if (data == 'ok') {
                    alert('操作成功');
                    window.location = '/admin';
                } else {
                        alert('重复');
                }
            });
        });
    }();
</script>