Quadram
1 year ago
10
0
Vue

Using a function in v-model to bring old values to an edit form

Posted 1 year ago by Quadram

I'm trying the following in VueJS:

I have an edit form to edit something (in this case a Beer) in different languages:

UpdateProfile.vue

<!--Beer Copy-->
<div class="field">
    <label class="label">{{data.name}}</label>
</div>

<!-- languages -->
<div v-for="language in languages" class="field has-addons">
    <p class="control">
        <a class="button is-static">{{language}}</a>
    </p>
    <p class="control is-expanded">
        <input class="input" type="text" v-model="getBeerTranslated[language]">
    </p>
</div>

So, for example, if Spanish and English languages are chosen I would like to have:

spanish|Cerveza Artesanal

english|Craft Beer

that returns me the values of that beer in different languages, and then I would edit it (the model is called Copy.php)

But now I'm having: spanish|(nothing)... (and so on with the rest of the languages).

I'm trying to build a function (getBeerTranslated) that for a given language (for example, Spanish) will return the beer translated to the input value.

inside methods() I wrote:

 getBeerTranslated(language){
        this.api.get('/translated/' + data.id, language).then(//what should I have here?);
    },

where I define the routes I have:

Route::get('/translated/{beer}', '[email protected]');

and in my BeersController:

 public function getBeerTranslated(Beer $beer, $language)
 {
   $beerInThatLanguage = Copy::where('key', $beer->getOriginal('name'))
                                                                                    ->value($language);

   return $beerInThatLanguage;
 }

I don't how to make my function works in Vue.js ,

Would you be so kind to give me some tips?

Thank you!!

Please sign in or create an account to participate in this conversation.