如何在vue.js中获得价值ID

Question

我正在从API中获取数据，因此我坚持要获得ID以将其发送回。

来自API：API端点的数据的示例

{
  id:1,
  name: 'qwerty',
},
{
  id:2,
  name: 'ytrewq',
},

正在期望通过Axios.post而不是值发送ID，但是V-Model完全获取值。

  <div class="form-group col-md-9">
            <select class="form-select" id="inputSubject" v-model='subject'>
            <option disabled value="">Select subject</option>
            <option v-for="item in subjects" v-bind:value="item.name" :key="item.id">{{ item.name }}</option>  
            </select> 

  </div>

  <div class="form-group col-md-9">
            <select class="form-select" id="inputWorkType" v-model='work_type'>
            <option disabled value="">Select work type</option>
            <option v-for="item in work_types" v-bind:value="item.name" :key="item.id">{{item.name}}</option>  
            </select> 

  </div>
<script>

export default {
  data () {
    return {
      subject: '',
      work_type: '',

    subjects: [],
    work_types: [],

    }
  },
  methods: {
       // getting the data
    getSubjectsWorkTypes() {

    axios
    .all([axios.get('/api/v1/subjects/'),
          axios.get('/api/v1/worktypes/')
        ])
    .then (
         axios.spread((firstResponse, secondResponse) => {
            console.log(firstResponse.data)
            console.log(secondResponse.data)    
            this.subjects = firstResponse.data
            this.work_types = secondResponse.data
        }))

    
    },
    // sending the data
    submitForm() {
      console.log(this.subject.key())
      const formData = {
      subject:   this.subject,
      work_type: this.work_type,
      }
      axios  
      .post("api/v1/orders/", formData)
    },

}
</script>

有什么聪明的方法可以获取和发送ID吗？我唯一的想法是构建将数组过滤到找到所选字符串的ID的函数...

Answer 1

＆lt; select gt;的值是选定的＆lt; option＆gt; s value

您将选项的值设置为<代码> .Name 而不是.id

const { ref, createApp, onMounted } = Vue;

createApp({
  setup() {
    const subject = ref("");
    const subjects = ref([]);
    const work_type = ref("");
    const work_types = ref([]);

    onMounted(() => {
      // simulate API load
      setTimeout(() => {
        subjects.value = [
          { id: 1, name: 'qwerty', },
          { id: 2, name: 'ytrewq', },
        ];
        work_types.value = [
          { id: 1, name: 'qwerty', },
          { id: 2, name: 'ytrewq', },
       ];
      }, 1000);
    });
    return { subject, subjects, work_type, work_types, };
  }
}).mount('#app');

#app {
  display:flex;
  justify-content: center;
  gap:2rem;
}
.contain {
  width:14rem;
}
.disp {
  margin-bottom: 1rem;
}



.as-console-wrapper { max-height: 0 !important}

<script src="https://unpkg.com/vue@next"></script>
<div id="app">
  <div class="contain">
    This is wrong
    <div class="disp">
      Selected ID is {{ subject }}
    </div>
    <div>
      <select class="form-select" id="inputSubject" v-model='subject'>
    
        <option disabled value="">Select Work Type</option>
    
        <option 
          v-for="item in subjects" 
          v-bind:value="item.name" 
          :key="item.id"
        >
          {{ item.name }}
        </option>
    
      </select>
    </div>
  </div>
  <div class="contain">
    This is right
    <div class="disp">
      Selected ID is {{ work_type }}
    </div>
    <div>
      <select class="form-select" id="inputSubject" v-model='work_type'>
    
        <option disabled value="">Select subject</option>
    
        <option 
          v-for="item in work_types" 
          v-bind:value="item.id" 
          :key="item.id"
        >
          {{ item.name }}
        </option>
    
      </select>
    </div>
  </div>
</div>