vue3 表单搜索内容回显到地址栏-Toy模板网

这篇具有很好参考价值的文章主要介绍了vue3 表单搜索内容回显到地址栏。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

vue3 表单搜索内容回显到地址栏,vue3,前端

地址栏输入内容回显到form表单，同理表单输入内容也要回显到地址栏中文章来源地址https://www.toymoban.com/news/detail-708139.html

<el-form :model="data">
    <el-form-item label="ORCHID:">
        <el-input
            type="text"
            v-model="data.orchId"
            placeholder="请输入ORCHID"
            @keyup.enter="handleSearch"
            clearable
          />
        </el-form-item>
    <el-form-item label="TASKID:">
        <el-input
            type="text"
            v-model="data.taskId"
            placeholder="请输入TASKID"
            @keyup.enter="handleSearch"
            clearable
          />
        </el-form-item>
    <el-form-item label="WORKFLOWID:">
        <el-input
            type="text"
            v-model="data.workflowId"
            placeholder="请输入WORKFLOWID"
            @keyup.enter="handleSearch"
            clearable
          />
    </el-form-item>
        <div>
          <el-form-item>
            <el-button class="btn-demo-item" @click="handleReset">重置</el-button>
            <el-button class="btn-demo-item" type="primary" @click="handleSearch"
              >查询</el-button
            >
          </el-form-item>
        </div>
    </el-form>

import { ref, watchEffect } from "vue";
import { useRoute, useRouter } from "vue-router";
let props = defineProps({
  modelValue: {
    type: Object,
    required: true,
  },
});
const data = ref({
  orchId: props.modelValue.orchId ?? "",
  taskId: props.modelValue.taskId ?? "",
  workflowId: props.modelValue.workflowId ?? "",
});
const route = useRoute();
const router = useRouter();
let emit = defineEmits(["search"]);
const handleReset = () => {
  resetForm(data.value);
  handleSearch();
};
const handleSearch = () => {
  router.push({ query: { ...route.query, ...data.value } });
  emit("search", data.value);
};
watchEffect(() => {
  data.value = {
    orchId: route.query.orchId || "",
    taskId: route.query.taskId || "",
    workflowId: route.query.workflowId || "",
  };
});

到了这里，关于vue3 表单搜索内容回显到地址栏的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！