How can I call an array when I call it with axios.get? My table tr internal attribute td does not appear Is the v-for statement invalid?

      <tr v-for="params in form" :key="params">
        <td>{{params.title}}</td>
        <td>{{params.company}}</td>
        <td>{{params.company_url}}</td>
        <td>{{params.location}}</td>
        <td>{{params.description}}</td>
        <td>{{params.date_posted}}</td>
      </tr>
<script setup>
import axios from 'axios';
import { useRouter } from 'vue-router';




axios.get("API_URL/list",{
  params: {
        title: "",
        company: "",
        company_url: "",
        location: "",
        description: "",
        date_posted: "",
  }
})
.then((res)=>{
  console.log(res.data)
  return res.data
})

axios.post data Is it right to use the parameters when Bring. the data sent in this form?

const state = reactive({
  form: {
  title: "",
  company: "",
  company_url: "",
  location: "",
  description: "",
  date_posted: ""
  },
});
const formCreate = async () => {
     const postdata = {
        title: state.form.title,
        company: state.form.company,
        company_url: state.form.company_url,
        location: state.form.location,
        description: state.form.description,
        date_posted: state.form.date_posted,
      };

CodePudding user response：

It seems like you are missing the assignment. Not sure how your form is defined, but likely you'd want to use a ref or reactive and assign the data to it.

try:

<tr v-for="params in form" :key="params">
  <td>{{params.title}}</td>
  <td>{{params.company}}</td>
  <td>{{params.company_url}}</td>
  <td>{{params.location}}</td>
  <td>{{params.description}}</td>
  <td>{{params.date_posted}}</td>
</tr>
<script setup>
  import axios from "axios";
  import { useRouter } from "vue-router";
  import { ref } from "vue";

  const form = ref([]); // <= define

  axios
    .get("API_URL/list", {
      params: {
        title: "",
        company: "",
        company_url: "",
        location: "",
        description: "",
        date_posted: "",
      },
    })
    .then((res) => {
      console.log(res.data);
      form.value = res.data; // <= assign
    });
</script>