没有从点击方法获得正确的值

Question

我试图从组件内的 v-model 控制的数据中获取值。

应用程序和 Vue 开发工具中的数据发生变化，但如果我通过控制台记录该数据，我总是会得到之前的值。

Vue 应用 这是我传递给组件的数据

new Vue({
  el: "#app",
  data: {
    "children": {
        "haveAnyOtherDependents": 'yes',
        "havePets": 'no',
    },
  },
})

Vue 组件 这里我从应用程序传递我需要的数据

// button-group component
Vue.component('button-group', {
    props: {
        title: {
            type: String
        },
        name: {
            type: String
        },
        content: {
            type: String
        },
        dataSource: {
            type: String
        }
    },
    data: function () {
        return {
            myTitle: this.title,
            myName: this.name,
            myContent: ''
        }
    },
    created(){
        this.myContent = this.setMyContent
    },
    methods: {
        sendData: function(){
            console.log('data: ', this.myContent, 'source', this.dataSource);
        }
    },
    computed: {
        setMyContent: function(){
            return this.content
        }
    },
    template: `
        <div class="form-group row mb-1">
            <br>
            <div class="col-sm-6 pt-1 text-md" v-text="myTitle + ' = ' + myContent"></div>
            <div class="col-sm-6 text-right">
                <div class="btn-group m-0">
                    <label class="btn mr-05 p-0 rounded-left">
                        <input type="radio" :name="myName" value="no" v-model="myContent" @click="sendData()">
                        <span class="d-block p-1 px-3 text-sm rounded-left">
                            <i class="fas fa-check mr-1 text-xs"></i>No
                        </span>
                    </label>
                    <label class="btn p-0 rounded-right">
                        <input type="radio" :name="myName" value="yes" v-model="myContent" @click="sendData()">
                        <span class="d-block p-1 px-3 text-sm rounded-right">
                            <i class="fas fa-check mr-1 text-xs"></i>Yes
                        </span>
                    </label>
                    <label class="d-none btn p-0">
                        <input class="d-none" type="radio" :name="myName" value="unknown" v-model="myContent" @click="sendData()" checked>
                        <span class="d-block p-1 px-3 text-sm">
                            <i class="fas fa-check d-none mr-1 text-xs"></i>Unknown
                        </span>
                    </label>
                </div>
            </div>
        </div>
    `
});
// end button-group

HTML

<div id="app" class="container">
  <button-group title="Other Dependants" name="other_dependents" 
:content="children.haveAnyOtherDependents" data-source="children.haveAnyOtherDependents"></button-group>
        <button-group title="Pets" name="pets" :content="children.havePets" data-source="children.havePets"></button-group>
</div>

这是一个小提琴，https://jsfiddle.net/yktoL8oz/

Answer 1

@Bert 在 cmets 中的回答

点击事件在模型更新之前触发。使用不同的事件，例如 change"

我将@click="sendData()" 更改为@change="sendData()" 并解决了问题。