Vuejs以多種輸入形式獲取索引

我有一個字串陣列，例如：

questions: [
  "Question 1?",
  "Question 2?",
  "Question 3?",
  "Question 4?",
],

然后我有我data()喜歡的表單欄位：

legitForm: {
  name: '', // this will be equal to question string
  answer: '',
  description: '',
  duration: '',
},

現在，我面臨的問題是，當我為其他問題的同一欄位上方的任何問題填寫輸入時，會獲得相同的值。

這是我的模板代碼：

<div v-for="(question, index) in questions" :key="index">
    <form @submit.prevent="legitStore(question)" method="post">
        <div class="row">
            <div class="col-md-12">
                <p>
                    <strong>{{question}}</strong>
                </p>
            </div>
            <div class="col-md-6">
                <label for="answer">Answer</label>
                <select class="mb-1 field" v-model="legitForm.answer" name="answer" id="answer">
                    <option value="1">Yes</option>
                    <option value="0">No</option>
                </select>
            </div>
            <div class="col-md-6">
                <label for="duration">Duration</label>
                <input class="field" v-model="legitForm.duration" type="text">
            </div>
            <div class="col-md-12">
                <label for="description">Description</label>
                <textarea style="height: 190px;" type="text" cols="5" rows="10" id="address" class="mb-1 field" v-model="legitForm.description"></textarea>
            </div>
        </div>
        <button type="submit" class="saveButtonExperience float-right btn btn--custom">
            <span class="text">Save</span>
        </button>
    </form>
</div>

這是我將資料發送到后端的 post 方法：

legitStore(question) {
    this.legitForm.name = question; // set "name" in `legitForm` to value of `question` string
    axios.post('/api/auth/userLegitsStore', this.legitForm, {
        headers: {
            Authorization: localStorage.getItem('access_token')
        }
    })
    .then(res => {
        // reset my data after success
        this.legitForm = {
            name: '',
            answer: '',
            description: '',
            duration: '',
        };
    })
    .catch(error => {
        var errors = error.response.data;
        let errorsHtml = '<ol>';
        $.each(errors.errors,function (k,v) {
            errorsHtml  = '<li>'  v   '</li>';
        });
        errorsHtml  = '</ol>';
        console.log(errorsHtml);
    })
},

這是問題截圖：

注意：我試過

1. 更改legitForm為陣列，如legitForm: [],和legitForm: [{....}]
2. 為我的輸入添加索引v-model

但我有錯誤，所以我不確定我做錯了什么，這就是我在這里問的原因。

uj5u.com熱心網友回復：

如果您將問題視為問題和答案，則可以執行以下操作：

questions: [
  {
    question: 'Question 1',
    answer: null,
    description: null,
    duration: null,
  },
  {
    question: 'Question 2',
    answer: null,
    description: null,
    duration: null,
  },
]

然后當回圈遍歷你的表單時，它會更像這樣：

<div v-for="(question, index) in questions" :key="index">
    <form @submit.prevent="legitStore(question)" method="post">
      ...
      <select class="mb-1 field" v-model="question.answer" name="answer" id="answer">
        <option value="1">Yes</option>
        <option value="0">No</option>
      </select>
      ...
    </form>
</div>

在存盤功能中，您可以發送問題中的資料而不是this.legitForm

uj5u.com熱心網友回復：

就像你說你在這里試過：

更改legitForm為陣列 likelegitForm: []和legitForm: [{....}]

添加index到我的輸入v-model

你應該這樣做。

我會legitForm改為：

//create legitForms equal to the length of questions
const legitForms = [];

for (i in questions) legitForms.push(
  {
    name: '', // this will be equal to question string
    answer: '',
    description: '',
    duration: '',
  }
);

在模板中：

<div v-for="(question, index) in questions" :key="index">
    <form @submit.prevent="legitStore(question)" method="post">
        <div class="row">
            <div class="col-md-12">
                <p>
                    <strong>{{question}}</strong>
                </p>
            </div>
            <div class="col-md-6">
                <label for="answer">Answer</label>
                <select class="mb-1 field" v-model="legitForms[index].answer" name="answer" id="answer">
                    <option value="1">Yes</option>
                    <option value="0">No</option>
                </select>
            </div>
            <div class="col-md-6">
                <label for="duration">Duration</label>
                <input class="field" v-model="legitForms[index].duration" type="text">
            </div>
            <div class="col-md-12">
                <label for="description">Description</label>
                <textarea style="height: 190px;" type="text" cols="5" rows="10" id="address" class="mb-1 field" v-model="legitForms[index].description"></textarea>
            </div>
        </div>
        <button type="submit" class="saveButtonExperience float-right btn btn--custom">
            <span class="text">Save</span>
        </button>
    </form>
</div>

uj5u.com熱心網友回復：

<div v-for="(question, index) in questions" :key="index">

在您的模板中，您遍歷questions并在此標記渲染物件legitForm中，所有問題都將參考相同的 1 物件，這就是所有問題具有相同資料的原因。

您應該已經創建了一個問題陣列，其中包含自己的問題內容，??例如

<template>
  <div v-for="(question, index) in questions" :key="index">
    <form @submit.prevent="legitStore(question)" method="post">
      ...
      <div class="col-md-12">
         <p>
            <strong>{{question.id}}</strong>
         </p>
      </div>
      ...
      <select class="mb-1 field" v-model="question.answer" name="answer" id="answer">
        <option value="1">Yes</option>
        <option value="0">No</option>
      </select>
      ...
    </form>
  </div>
</template>

<script>
class QuestionForm {
  // pass default value if you want
  name = ''
  answer = ''
  description = ''
  duration = ''
  id = ''
  constructor(form) {
    Object.assign(this, form)
  }
}

function initQuestions(num) {
  // can generate a Set object cause question are unique
  return Array.from({ length: num }, (v, i) => i).map(_j => new QuestionForm())
}

export default {
  data() {
    return {
      questions: initQuestions(5), // pass number of question you want to generate
    }
  }
}
</script>

標籤：javascript Vue.js

上一篇：從包含主題標簽的字串中洗掉一個單詞

下一篇：將嵌套陣列替換為新陣列