Is it possible to use two-way computed property in vuex with an array?
Example: I have an array of questions and each question can be edited at the same time. I would like to do the following
<div v-for="question in getQuestions(sectionId)">
<input type="text" v-model="question.title" />
</div>
Related
I want to show a translation on the title of a component.
Here is the HTML code:
<user-card
:totalUser="totalUsers"
color="primary"
icon="UserIcon"
user-title="Total users"
/>
On my user-card component I have this:
<b-card class="text-center">
<b-avatar
:variant="`light-${color}`"
class="mb-1"
size="45"
>
<feather-icon
:icon="icon"
size="21"
/>
</b-avatar>
<div class="truncate">
<h2 class="mb-25 font-weight-bolder">
{{ totalUser}}
</h2>
<span>{{ user-title }}</span>
</div>
</b-card>
And to use translation I have this syntax where I get the translated terms from the JSON file:
{{$t("Total users")}}
How can I implement this on the user-title?
Have a look at this, I have tried to replicate your scenario in code sandbox.
sample app
What you are doing wrong is that $t is a function that accepts variable name which has an actual message in it, first you have to define a variable e.g totalUserTitle: 'Total users' for multiple languages like I did in index.js, and then you can use it as $t(totalUserTitle).
Just use v-bind and pass the expression to your user-card component directly:
<user-card
...
:user-title="$t('Total users')"
/>
You're actually already using this syntax in multiple places, this directive just tells Vue to "dynamically bind one or more attributes, or a component prop to an expression", which is exactly what you're looking for here.
This will evaluate $t('Total users') as an expression and then pass the result to your component as a prop.
Is there a way to have control over attributes provided through the component tag?
For example:
<my-component class="myClass" style="myStyle"></my-component>
My component:
<template>
<div>
<div>
</div>
<div>
</div>
</div>
</template>
At render Vue applies given attributes on the root:
<div class="myClass" style="myStyle">
<div>
</div>
<div>
</div>
</div>
I want to control where those attributes are applied like so:
<div>
<div>
</div>
<div class="myClass" style="myStyle">
</div>
</div>
#Boussadjra Brahim answer is definitely one way to handle it, however this will require you to pass in all of the class attributes you want everytime you define the component.
This question is answered in this SO post already as well.How to style a nested component from its parent component in Vuejs?
If you want a bit more flexibility I would suggested using interpolation and properties as below. This will let you define some default classes and pass in whatever else in addition.
<app-header :headerclass="parent-header-class"> </app-header>
Inside of your child component, you can use these properties and v-bind the class inside the HTML, as shown in the example below:
<template>
<div :class=`${headerClass} internal-class-example button`> </div>
</template>
Note: This does not allow you to use any scoped parent CSS to pass to the child. The classes you pass down must be global. Otherwise, the child component will not know what it is.
I'd like to know if it's possible to have a component communicate with a v-model within a slot?
<medical-form>
<input type="text" v-model="dob" />
</medical-form>
In this example the dob data is defined in the medical-form component. The contents of the slot are generated server side as it uses sensitive information to work out which fields should be presented, because of this I can't fully move the form into the medical-form component.
Yes you can give slot-scope and you will get the data
In your medical-form component bind your dynamic value.
<slot :dob="dob" />
<medical-form>
<template slot-scope="{dob}">
<input type="text" v-model="dob" />
</slot>
</medical-form>
But recently vue deprecated using of slot-scope but it is backward compatible and will work. However I would like to show you that also.
Reference - https://v2.vuejs.org/v2/guide/components-slots.html
<medical-form>
<template v-slot="{dob}">
<input type="text" v-model="dob" />
</template>
</medical-form>
So I know to use v-model with vuex you use a computed property with a setter and getter, where the getter dispatches an action. How would this work when the property you want to bind with is an array? This is how the the code worked pre-Vuex so trying to convert it since newAds now is within Store.
<div v-for="ad in newAds" :key="ad.id">
<div v-for="key in ad" :key="key.id">
<input
type="text"
v-model="key.finalurl"
placeholder="www.books.com"
autofocus
>
</div>
</div>
Can I pass multiple parameters through a setter and then run that through to the mutation?
You can split v-model into the #input event handler and the :value property, and then handle multiple values, like this:
<input
type="text"
:value="key.finalurl"
#input="handleFinalURL"
placeholder="www.books.com"
autofocus
>
methods: {
handleFinalURL(value) {
// do stuff here like
callFunction(value, someOtherParam, extra)
}
}
It's less handy but it will solve your problem.
I am trying to create a step-by-step form using Components & Routing. If there is a better or easier approach to do this, please feel free to suggest, since I am new to Vue.js.
I have a and 3 templates.
<template id="step-1">
<h1>Welcome to Form</h1>
</template>
<template id="step-2">
<label>Name:</label>
<input type="text" name="name" v-model="name" />
<br />
<label>Email:</label>
<input type="email" name="email" v-model="email" />
</template>
<template id="step-3">
<p>Review:</p>
<!-- Display Step 2 Form Values -->
{{ name }}
{{ email }}
<button>Submit</button>
</template>
What I want to do is, display the input values on #step-3, and on a button click, submit the form via an ajax call.
You can view the Fiddle from here: https://jsfiddle.net/j7mwc9wk/
One way to do this is for all three components use the same data object. For the purposes of this bit of code it can be a simple javascript object. A bit more sophisticated approach is to use Vuex an official Vue data store.
You could also have these three components have the same parent in which case name and email would be properties of parent data method and therefore accessible to all children. I don't know how this would work with Vue router but it should be fine.