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