vue, v-model ללולאה של selects

[chagold]

השאלה לא בהכרח קשורה לvue, אולי סתם חוסר ידיעה איך לגשת / לכתוב לאובייקט / מערך בjs.

הסיטואציה כזו:

<select v-for="(coloumn, key) in list_coloumns" v-model="?????">
    <option v-for="(coloumn, key) in list_options"
        v-bind:key="key">
                                        {{option}}
        </option>
 </select>

שיש כמה סלקטים, ואני צריך לשמור את נתוניהם באובייקט/מערך כלשהו כדי שכשבוחרים option הוא ישמור ויציג אותו בשורה של תיבת הרשימה.

(אני לא יכול לשמור במשתנה ספציפי, כיון שכל שינוי של אחד מהם יציג את הערך אוטומטית בכל התיבות רשימה האחרות).

השאלה, איך אני מסמן לו את המתודה המסויימת שלו (כשהמזהה יכול להיות הcoloumn),

כמו משהו כזה:

v-model="list[coloumn]"

אבל איך אני מגדיר את האובייקט/מערך?

תודה.

[meir lamdan]

פוסט זה נמחק!

[chagold]

@meir-lamdan
בשאלה שלי הv-for גם על הselect עצמו. לא רק על האופציות (ליתר דיוק: האופציות לא קשורות בכלל לשאלה. השאלה רק על הסלקטים, כיון שיש לופ של סלקטים שאמורים כ"א לשמור את נתוניו במיקום שלו).
השאלה על איפה שסימנתי בסימני שאלה.

[meir lamdan]

@chagold כתב בvue, v-model ללולאה של selects:

אבל איך אני מגדיר את האובייקט/מערך?

const list = {
 coloumnA:null,
 coloumnB:null,
 coloumnC:null
}

v-model="list[coloumn]"

[chagold]

@meir-lamdan כתב בvue, v-model ללולאה של selects:

@chagold כתב בvue, v-model ללולאה של selects:

אבל איך אני מגדיר את האובייקט/מערך?

const list = {
 coloumnA:null,
 coloumnB:null,
 coloumnC:null
}

v-model="list[coloumn]"

יש אפשרות להגדיר על אובייקט כזה watch? כי ה-coloumn אינם מתוכננים מראש (שאני יכול להצהיר עליהם), אלא הם מיובאים ונוצרים ע"י הקוד, אז אין לי אפשרות לעשות watch על כל אחד מהם, וב-watch על הlist שינוי של הפרטים שלהם לא מגיב. (גם שימוש בdeep: true לא מועילה, כנראה כיון שהם לא מוצהרים מראש, כנ"ל).

או אולי יש פיתרון שאני לא יודע של הגדרת watch על הlist עצמו, בצורה כלשהי ששינוי של כ"א מהמאפיינים שלו יגיב, (אולי יש אפשרות להצהיר על המאפיינים וה-watch ג"כ מתוך הקוד)?

תודה

[meir lamdan]

@chagold
אני לא חושב שזה קשור
תבדוק שאתה מגדיר נכון את הwatch
וגם אם אתה עוקב אחרי אוביקט אתה צריך לציין את האובייקט כפונקציה
הנה דוגמה מהתיעוד של vue

watch(
  () => state.someObject,
  (newValue, oldValue) => {
    // Note: `newValue` will be equal to `oldValue` here
    // *unless* state.someObject has been replaced
  },
  { deep: true }
)

[chagold]

@meir-lamdan
הצלחתי כדבריך.

רק הבעיה שהוואצ' לא מציג את ההבדל בין הערכים הישנים והחדשים (הוא מציג את שניהם אותו דבר. באג בלע"ז).
מצ"ב פידל.

[meir lamdan]

@chagold
נכון, הם כותבים את זה בתיעוד שלהם.

export default {
  watch: {
    someObject: {
      handler(newValue, oldValue) {
        // Note: `newValue` will be equal to `oldValue` here
        // on nested mutations as long as the object itself
        // hasn't been replaced.
      },
      deep: true
    }
  }
}

אגב, אני לא יודע מה הצרכים שלך בדיוק, אבל לרוב אפשר ומומלץ להשתמש בcomputed