javascript+vue3 + Ant Design Vue, 为什么无法获取输入框中的数据?

作者站长头像
站长
· 阅读数 7
<template>
  <div>
    <a-input v-model="state.keyword" placeholder="请输入关键词" />
    <a-button @click="search">搜索</a-button>
    <div>{{ state.keyword }}</div>
    <!-- <a-list
      bordered
      v-if="state.results.length"
      :dataSource="state.results"
      renderItem="item => (
        <a-list-item>
          {{ item.clip_title }}
        </a-list-item>
      )"
    /> -->
  </div>
</template>

<script>
import { reactive } from "vue";
import axios from "axios";

export default {
  setup() {
    const state = reactive({
      keyword: "",
      results: [],
    });

    const search = async () => {
      console.log(state.keyword);
      const response = await axios.get(
        "http://xxxx.cn/keyword/parse/history",
        { params: { keyword_task_id: state.keyword } }
      );
      state.results = response.data;
    };

    return { state, search };
  },
};
</script>

上面有一段 vue 代码,为什么我点击了搜索之后,这个 state.keyword 确实空字符呢?

javascript+vue3 + Ant Design Vue, 为什么无法获取输入框中的数据?

没有获取 state.keywordjavascript+vue3 + Ant Design Vue, 为什么无法获取输入框中的数据?

控制台打印出来也是空字符javascript+vue3 + Ant Design Vue, 为什么无法获取输入框中的数据?


我的 package.json 内容如下:

{
  "name": "tracking-king",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "ant-design-vue": "^3.2.20",
    "axios": "^1.4.0",
    "core-js": "^3.8.3",
    "element-plus": "^2.3.4",
    "vue": "^3.2.13",
    "vue-router": "^4.1.6"
  },
  "devDependencies": {
    "@babel/core": "^7.12.16",
    "@babel/eslint-parser": "^7.12.16",
    "@vue/cli-plugin-babel": "~5.0.0",
    "@vue/cli-plugin-eslint": "~5.0.0",
    "@vue/cli-service": "~5.0.0",
    "eslint": "^7.32.0",
    "eslint-plugin-vue": "^8.0.3"
  },
  "eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/vue3-essential",
      "eslint:recommended"
    ],
    "parserOptions": {
      "parser": "@babel/eslint-parser"
    },
    "rules": {
      "vue/multi-word-component-names": 0,
      "vue/no-unused-components": "off",
      "no-unused-vars": "off"
    }
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not dead",
    "not ie 11"
  ]
}

但是我把 Ant Design Vue 换成 ElementPlus 就一切正常,为什么?

main.js

import { createApp } from "vue";
import App from "./App.vue";
import router from "./router";
import Antd from "ant-design-vue";
import "ant-design-vue/dist/antd.css";

// import ElementPlus from 'element-plus'
// import 'element-plus/lib/theme-chalk/index.css'

const app = createApp(App).use(router).use(Antd);

// const app = createApp(App).use(router).use(ElementPlus);

app.mount("#app");
回复
1个回答
avatar
test
2024-07-03

两者的作用是相同的,都是实现输入框的双向数据绑定。v-model:value="value" 可以指定绑定的属性名,更加灵活,而 v-model="value" 更加简洁,适合于绑定默认的 value 属性。

回复
likes
适合作为回答的
  • 经过验证的有效解决办法
  • 自己的经验指引,对解决问题有帮助
  • 遵循 Markdown 语法排版,代码语义正确
不该作为回答的
  • 询问内容细节或回复楼层
  • 与题目无关的内容
  • “赞”“顶”“同问”“看手册”“解决了没”等毫无意义的内容