选择值，然后使用vue.js剂量工作提交表单

Question

我的问题是，当我选择输入值然后提交表单时，在answer.php ，表单中的answer值是空的- $_POST['answer']这是我的html代码：

<form action="answer.php" ref="send" method="post" class="container">
<h1><?= $question['Question']; ?></h1>
<input type="hidden" name="id" value="<?= $question['ID']; ?>">
<div class="custom-control custom-radio" v-on:click="demo">
    <input type="radio" id="answer1" name="answer" class="custom-control-input" value="1" v-model="answer">
    <label class="custom-control-label" for="answer1"><?= $question['Answer1']; ?></label>
</div>
<div class="custom-control custom-radio">
    <input type="radio" id="answer2" name="answer" class="custom-control-input" value="2" v-model="answer">
    <label class="custom-control-label" for="answer2"><?= $question['Answer2']; ?></label>
</div>
<div class="custom-control custom-radio">
    <input type="radio" id="answer3" name="answer" class="custom-control-input" value="3" v-model="answer">
    <label class="custom-control-label" for="answer3"><?= $question['Answer3']; ?></label>
</div>
</form>

这是我的vue代码：

new Vue({
    el: '#app',
    data: {
        answer: 0,
    },
    methods: {
        demo() {
            this.answer = 1;
        },
    },
    watch: {
        answer(val) {
            this.$refs.send.submit();
        },
    },
});

像我从来没有选择任何形式的表格一样发送，没有answer 。 我做错了什么？

更新：我正在考虑有人在div内单击，而不是在文本本身上单击。 在div中的“白色”空间中。 那是我的问题发生的时间，我希望他们能够单击div并选择答案，而不是仅在文本上。

在下面的gif中，您可以看到1是answer的值，而demo123是id的值，当我单击单选按钮时，您可以看到在发送表单之前它们已更改，但是您也可以在answer.php时看到它们answer.php加载时， id的value是value （默认值），并且找不到answer值。

Answer 1

我设法使用此代码使其工作

methods: {
    demo() {
        this.$refs.send[1].checked = true;
        this.$refs.send.submit();
    },
},

因此，当有人在div单击第一个单选按钮时，将其选中，然后将其发送给表单。 如果有人有更好的解决方案，请告诉我！ 谢谢！