1 year ago

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:


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

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

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:

        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'))

   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.