点击按钮修改Vue.js的formdata.eventname数据无响应，求解决方案及提问规范

问题原因及修复方案 #

你点击按钮无响应是代码存在多处语法错误、结构不规范导致的，具体问题和修改方式如下：

• 引入Vue的script标签语法错误，存在多余空格且未闭合
• Vue实例的methods对象缺少闭合大括号，导致整体代码语法报错，无法正常初始化实例
• 按钮元素必须放在Vue挂载的#app容器内，否则绑定的@click事件不会生效

修正后的完整代码示例 #

<!-- 正确引入Vue -->
<script src="https://unpkg.com/vue"></script>
<div id="app">
  <!-- 按钮放在app容器内才会被Vue识别 -->
  <button class="button is-link" @click="submitform">Submit</button>
  <!-- 可添加测试文本验证修改效果 -->
  <p>当前eventname值：{{ formdata.eventname }}</p>
</div>
<script>
new Vue({
  el: "#app",
  data: {
    total: parseInt("<%= total %>"),
    events: [],
    current: 1,
    perPage: 2,
    rangeBefore: 1,
    rangeAfter: 1,
    order: "",
    size: "",
    isSimple: false,
    isRounded: false,
    prevIcon: "chevron-left",
    nextIcon: "chevron-right",
    formdata: {
      eventname: "eventname2",
      organizer: "",
      starttime: "",
      endtime: "",
      venue: "",
    },
  },
  methods: {
    submitform: async function () {
      this.formdata.eventname = "eventname1";
    }
  // 补全methods的闭合大括号
  }
}); 
</script>

调整后符合发布规范的提问内容 #

问题描述 #

我在Vue.js 2项目中想要实现点击按钮修改formdata下的eventname字段值，但是绑定点击事件后点击按钮没有任何效果，我的实现代码如下：

实现代码

<script src="https://unpkg.com/vue"></script>
<div id="app">
  <button class="button is-link" @click="submitform()">Submit</button>
</div>
<script>
  new Vue({
    el: "#app",
    data: {
      total: parseInt("<%= total %>"),
      events: [],
      current: 1,
      perPage: 2,
      rangeBefore: 1,
      rangeAfter: 1,
      order: "",
      size: "",
      isSimple: false,
      isRounded: false,
      prevIcon: "chevron-left",
      nextIcon: "chevron-right",
      formdata: {
        eventname: "eventname2",
        organizer: "",
        starttime: "",
        endtime: "",
        venue: "",
      },
    },
     methods: {
      submitform: async function () {
        this.formdata.eventname = "eventname1";
      },
  }); 
</script>

预期效果 #

点击Submit按钮后，this.formdata.eventname的值从初始的eventname2变为eventname1。

实际效果 #

点击按钮后没有任何反应，eventname的值没有发生变化。

内容的提问来源于stack exchange，提问作者Chak Nam CHAN