<button type="primary" class="feedback_submit" @click="feedbackSubmit" v-bind:loading="loading"> <label>提交</label> </button>feedbackSubmit() { this.setData({ loading: true }) }点提交控制台出现TypeError: this.setData is not a function

根据你提供的代码，问题出现在 feedbackSubmit() 函数中的 this.setData() 的部分。错误提示 TypeError: this.setData is not a function 表明 setData 不是一个函数。在大多数情况下，Vue.js 中没有名为 setData 的函数。可能是你想要使用的函数名称不正确导致的错误。在 Vue.js 中，常用的方法是使用 Vue 实例的 $set() 或直接更新数据属性。尝试将 feedbackSubmit() 函数中的 this.setData() 替换为适当的方法，例如： ```javascript feedbackSubmit() { this.loading = true; } ``` 或者，如果你想要更新 Vue 组件中的某个属性，并且该属性是响应式的，可以使用 $set() 方法： ```javascript feedbackSubmit() { this.$set(this, 'loading', true); } ``` 请根据你的具体需求选择适当的方法来更新数据属性。记得在 Vue 组件中使用 this 前确保已正确绑定 Vue 实例。

样式优化美化<!DOCTYPE html> {% load static %} <html> <head> <title>个人中心</title> <style> .container { display: flex; flex-wrap: wrap; justify-content: space-between; } .module { width: calc(25% - 20px); margin-bottom: 20px; padding: 20px; border: 1px solid #ccc; border-radius: 5px; } @media (max-width: 768px) { .module { width: calc(50% - 20px); } } @media (max-width: 480px) { .module { width: 100%; } } </style> </head> <body> <div class="container"> <div class="module personal-info">  <h2>个人信息</h2> <form> <label for="username">用户名：</label> <input type="text" id="username"> <label for="email">邮箱：</label> <input type="email" id="email"> <button type="submit">保存</button> </form> </div> <div class="module change-password">  <h2>修改密码</h2> <form> <label for="old-password">旧密码：</label> <input type="password" id="old-password"> <label for="new-password">新密码：</label> <input type="password" id="new-password"> <label for="confirm-password">确认密码：</label> <input type="password" id="confirm-password"> <button type="submit">保存</button> </form> </div> <div class="module bind-phone">  <h2>绑定手机</h2> <form> <label for="phone">手机号：</label> <input type="tel" id="phone"> <button type="submit">保存</button> </form> </div> <div class="module my-messages">  <h2>我的消息</h2> <ul> <li><a href="#">系统消息1</a></li> <li><a href="#">系统消息2</a></li> <li><a href="#">好友消息1</a></li> <li><a href="#">好友消息2</a></li> </ul> </div> </div> </body> </html>

好的，这是优化美化后的代码样式： <!DOCTYPE html> {% load static %} <html> <head> <title>个人中心</title> <style> .container { display: flex; flex-wrap: wrap; justify-content: space-between; } .module { width: calc(25% - 20px); margin-bottom: 20px; padding: 20px; border: 1px solid #ccc; border-radius: 5px; } @media (max-width: 768px) { .module { width: calc(50% - 20px); } } @media (max-width: 480px) { .module { width: 100%; } } </style> </head> <body> <div class="container"> <div class="module personal-info">  <h2>个人信息</h2> <form> <label for="username">用户名：</label> <input type="text" id="username"> <label for="email">邮箱：</label> <input type="email" id="email"> <button type="submit">保存</button> </form> </div> <div class="module change-password">  <h2>修改密码</h2> <form> <label for="old-password">旧密码：</label> <input type="password" id="old-password"> <label for="new-password">新密码：</label> <input type="password" id="new-password"> <label for="confirm-password">确认密码：</label> <input type="password" id="confirm-password"> <button type="submit">保存</button> </form> </div> <div class="module bind-phone">  <h2>绑定手机</h2> <form> <label for="phone">手机号：</label> <input type="tel" id="phone"> <button type="submit">保存</button> </form> </div> <div class="module my-messages">  <h2>我的消息</h2> <ul> <li><a href="#">系统消息1</a></li> <li><a href="#">系统消息2</a></li> <li><a href="#">好友消息1</a></li> <li><a href="#">好友消息2</a></li> </ul> </div> </div> </body> </html>

<form bindsubmit="formSubmit"> <view class="sectiontitle">用户名称 <input name="username" id="username" placeholder="请输入用户名" value='{{form.username}}' /></view>  <view class="sectiontitle">用户密码 <input name="password" id="password" placeholder="请输入密码" value='{{form.password}}' /></view> <view class="sectiontitle">确认密码 <input name="checkPassword" id="checkPassword" placeholder="请再次输入密码" value='{{form.checkPassword}}' /></view> <view class="sectiontitle">密码提示 <input name="pstell" id="pstell" placeholder="请输入密码提示" value='{{form.pstell}}' /></view> <view class="sectiontitle">常用电话 <input name="phone" id="phone" placeholder="请输入常用电话" value='{{form.phone}}' /></view> <view class="sectiontitle">身份证号 <input name="sfid" id="sfid" placeholder="请输入身份证号" value='{{form.sfid}}' /></view>  <view class="btn-area"> <button formType="submit">提交</button> <button formType="reset">重置</button> </view> </form>形成7行两列的表单，提价和重置在一行

您可以使用以下代码来创建一个7行两列的表单，并将提交和重置按钮放在同一行： ```html <form bindsubmit="formSubmit"> <view class="section__title">用户名称 <input name="username" id="username" placeholder="请输入用户名" value='{{form.username}}' /> </view> <view class="section__title">用户密码 <input name="password" id="password" placeholder="请输入密码" value='{{form.password}}' /> </view> <view class="section__title">确认密码 <input name="checkPassword" id="checkPassword" placeholder="请再次输入密码" value='{{form.checkPassword}}' /> </view> <view class="section__title">密码提示 <input name="pstell" id="pstell" placeholder="请输入密码提示" value='{{form.pstell}}' /> </view> <view class="section__title">常用电话 <input name="phone" id="phone" placeholder="请输入常用电话" value='{{form.phone}}' /> </view> <view class="section__title">身份证号 <input name="sfid" id="sfid" placeholder="请输入身份证号" value='{{form.sfid}}' /> </view> <view class="btn-area"> <button formType="submit">提交</button> <button formType="reset">重置</button> </view> </form> ``` 这将创建一个包含7行两列的表单，每一行包含一个标题和一个输入框。提交和重置按钮将位于底部的同一行。

阅读全文

<button type="primary" class="feedback_submit" @click="feedbackSubmit" v-bind:loading="loading"> <label>提交</label> </button>feedbackSubmit() { this.setData({ loading: true }) }点提交控制台出现TypeError: this.setData is not a function

相关推荐

解决v-for中使用v-if或者v-bind:class失效的问题

在vue中使用v-bind:class的选项卡方法

vue基础之v-bind属性、class和style用法分析

<button type="primary" bind:tap=btnTapHandler>按钮</button>哪里错了

<i-table max-height="300"> 温度传感器: {{ temperature }} 湿度传感器: {{ humidity }} 防爆开关: {{ explosion_status }} </i-table> <i-button type="primary" size="large" @click="refreshData">刷新数据</i-button> 怎么用vue模板改写这段代码

<template> <button @click="refreshIframe">刷新</button> <i-frame :src="url" /> </template>vue怎么刷新这个i-frame组件

计算属性 R: <input type="range" min="0" max="255" v-model-number="r"> G: <input type="range" min="0" max="255" v-model-number="g"> B: <input type="range" min="0" max="255" v-model-number="b"> 显示颜色 {{ rgb(${r},${g},${b}) }} <button @click="getColor">点击</button>

<template> <component :is="type" v-bind="linkProps"> <slot /> </component> </template>

<component :is="type" v-bind="linkProps(to)"> <slot /> </component>

最新推荐

基于springboot共享经济背景下校园闲置物品交易平台源码数据库文档.zip

基于WoodandBerry1和非耦合控制WoodandBerry2来实现控制木材和浆果蒸馏柱控制Simulink仿真.rar

深入浅出：自定义 Grunt 任务的实践指南

管理建模和仿真的文件

数据可视化在缺失数据识别中的作用

ABB机器人在自动化生产线中是如何进行路径规划和任务执行的？请结合实际应用案例分析。

网络物理突变工具的多点路径规划实现与分析

"互动学习：行动中的多样性与论文攻读经历"

自动化缺失值处理脚本编写

SQLite在非易失性内存环境下如何进行事务处理和缓冲区管理的优化？

<i-table max-height="300">
温度传感器: {{ temperature }}
湿度传感器: {{ humidity }}
防爆开关: {{ explosion_status }} </i-table>
<i-button type="primary" size="large" @click="refreshData">刷新数据</i-button> 怎么用vue模板改写这段代码