vue3 使用ref绑定dom元素并取值

89 阅读1分钟

示例:

<template>
  <div>
    <input ref="title" type="text" placeholder="">
    <input ref="content" type="text" placeholder="">
    <button @click="getValue">获取输入值</button>

  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import axios from 'axios';

// 创建 ref 对象用于引用 input 元素
const title = ref(null);
const content = ref(null);


function getValue() {

  const data = {
    title: title.value.value,
    content: content.value.value
  }

  axios.post("/api/user/insert", data)
    .then(function (response) {

      console.log(response.data);
      if (response.data.state == 'success') {
        form[0].reset();
        //ShowMessage('留言成功!',1)
        //setTimeout(() => {router.push('/home');},1000)          
      }
    })
    .catch(function (error) {
      console.log(error);
    });
}
</script>