时间戳

首页 > 解决方案 > 2 方式绑定在 vuejs 中无法正常工作

vue.js - 2 方式绑定在 vuejs 中无法正常工作

问题描述

我以这种方式定义了一个 vuejs 组件：

<template>
    <form @submit.prevent="submit">
        <textarea id="content" cols="30" rows="10" v-model="content">{{ content }}</textarea>

        <button class="btn btn-lg btn-success" type="submit" @click="send()">
            Send content
        </button>
    </form>
</template>

<script>
    export default {
        data() {
            return {
                content: '// Initial content'
            }
        },
        methods: {
            send() {
                console.log('Content', this.content);
            },
            submit() {
                return false;
            }
        },
        mounted() {
            console.log('Template init ', this.content);
        }
    }
</script>

当我单击发送时，发送方法按预期输出文本区域的内容。但是当我用 jquery 改变 textarea 的内容时：

$('#content').val(content);

并点击发送，它不会更新模板中的内容。“发送”输出旧值。

有人可以向我解释这里有什么问题吗？

标签： vue.js

解决方案

v-model正在侦听输入事件以触发更改其绑定变量的值。

从vue.js 文档：

v-model 在内部使用不同的属性并为不同的输入元素发出不同的事件：

  • text 和 textarea 元素使用 value 属性和输入事件；
  • 复选框和单选按钮使用选中属性和更改事件；
  • 选择字段将值用作道具并将更改用作事件。

使用 JQuery val() 方法选择元素并更改值不会触发v-model正在侦听的事件，因此绑定变量的值不会更改/更新。

如果您绝对必须使用 JQuery 来更改内容，您可以手动触发一个事件，该事件也可能触发v-model绑定更新：

$('#content').val(content).trigger('input');

推荐阅读