How can I set v-model to the value of a child of a child property in a v-for loop?

Viewed 97

This is my first question on Stackoverflow. Previously I found existing answers for most of my questions but not this time! Please let me know if should include more information or code.

I am making dynamic tables and forms in Vue 2.6, based on Laravel Model data structure (basically a column/form input for each column on the database). I am now facing problems when trying to load the field translations that come from the server. The translations are stored in the SQL database in JSON format. I use the Element UI for Vue library, but tested this scenario without it with the same results so I think it's unrelated.

My data comes as: [{ name: {"en": "English Name", "de": "German name" }}]

My table code is as follows:

 <el-table
     :data="inputData">
     <el-table-column
         v-for="column in columns"
         :key="column"
         :prop="column"
         :label="capitalizeFirstLetter(column)">
         <template slot-scope="props">
             {{ props.row[column][locale] }}
         </template>
     </el-table-column>
 </el-table>

column is the property name (or SQL column name). locale comes from the HTML lang tag and is a string such as 'en' or 'de'.

This gives me error [Vue warn]: Error in render: "TypeError: can't access property "de", props.row[column] is null" immediately on page load (or popup open).

If I use {{ props.row[column] }} in line 9 of the snippet, without the second bracket property [locale], it prints the entire JSON object on the table as expected (so it is not null), as [Object object]. But in my use case I need to show the specific translation for the current language set in the html lang tag, so I have to access this 'locale' property somehow.

I also have a dynamic form, where I face the same problem. I have one tab for each language (strings 'en', 'de', 'fr'), and make forms with v-for for each available language. Code as follows:

<div v-if="languages">
    <el-form :model="form" v-for="language in languages">
        <el-form-item v-for="column in columns" :label="column" :prop="form[column]" :key="column">
            <el-input v-model="form[column][language.code]"></el-input>
        </el-form-item>
    </el-form>
</div>

In <el-input v-model="form[column][language.code]"></el-input> I get a similar error: [Vue warn]: Error in render: "TypeError: can't access property "null", _vm.form[column] is undefined"

So why does the object return null/undefined when trying to access its child property? How can I have an input that v-models into a child of a child?

I just want to save each translation as a child of the property because this would work really well with my PHP translatable trait.

I appreciate any help! Thank you and good day

0 Answers
Related