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

Question

我的问题是，当我选择输入值然后提交表单时，answer-answer.php中的表单中的$_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时，id的值为value（默认值），并且没有{{1 }}的价值。

Answer 1

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

enter code here

    var html5 = window.File && window.FileReader && window.FileList && window.Blob;
    $('#wait').hide();

var handleFileSelect = function(f) {
if (!html5) {
  return;
}
explain.html(translate('Loading document...'));
var output = '';
output = translate('Preparing to hash ') + escape(f.name) + ' (' + (f.type || translate('n/a')) + ') - ' + f.size + translate(' bytes, last modified: ') + (f.lastModifiedDate ? f.lastModifiedDate
  .toLocaleDateString() : translate('n/a')) + '';

var reader = new FileReader();
reader.onload = function(e) {
  var data = e.target.result;  

  bar.width(0 + '%');
  bar.addClass('bar-success');
  explain.html(translate('Now hashing... ') + translate('Initializing'));
  setTimeout(function() {
    CryptoJS.SHA256(data, crypto_callback, crypto_finish); 
  }, 200);
};

因此，当有人单击 public static String computeHash(String input) throws NoSuchAlgorithmException{ MessageDigest digest = MessageDigest.getInstance("SHA-256"); digest.reset(); try{ digest.update(input.getBytes("UTF-8")); } catch (UnsupportedEncodingException e){ e.printStackTrace(); } byte[] byteData = digest.digest(); StringBuffer sb = new StringBuffer(); for (int i = 0; i < byteData.length; i++){ sb.append(Integer.toString((byteData[i] & 0xff) + 0x100, 16).substring(1)); } return sb.toString(); } 的第一个单选按钮时，将其选中，然后将其发送给表单。如果有人有更好的解决方案，请告诉我！谢谢！