I integrated i18n-next in my Vue3 project and it works for elements like headers or labels with the known syntax {{ $t ("something") }}, but I can't get it to work with the value or placeholder of things like <input type="submit" value="This should be variable" class=... />
What is the correct way to do this?
Just like Thomas mentioned in the above comment, this is how it works:
<input type="submit" :value="$t('valuename')" class=.. />
Related
i'm in Vue.js
I made a radio input component, I use a v-for to display all the input and label, I would like to know if I can tell it to pass the checked attribute to the element from the first iteration of the v-for loop
<div v-for="(option) in options" :key="option.name">
<label class="form-check-label mr-2" :for="option.for">
{{ option.name }}
</label>
<input
v-model="selectedChoice"
class="mr-4"
type="radio"
name="radio"
:id="option.for"
/>
</div>
Thanks for your help
if I understand you correct you want to check your first radio button from your v-for.
You have two options to achieve that:
First option
You can set selectedChoice to your first choice like this:
data() {
return {
options: ['yourChoice1', 'yourChoice2'] //you have to set your array in here
selectedChoice: 'yourChoice1',
}
}
Second option
You set your data prop to the first item in your array - this is able because you're using v-model - you do it like this:
this.selectedChoice = this.yourChoice[0]
Hopefully this helps you out - please let me know!
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.
I read on this docs : https://github.com/pqina/vue-filepond
I try to add like this :
<FilePond
allowMultiple="true"
accepted-file-types="image/jpg, image/jpeg, application/pdf"
maxFileSize="2MB"
required="true"/>
multiple, validation file type, max file works
But, required does not works
How can I solve this problem guys?
Using the v-bind:required prop works:
<form method="post" action="">
<file-pond v-bind:required="true"/>
<button type="submit">submit</button>
</form>
Related GitHub issue: https://github.com/pqina/vue-filepond/issues/138
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.
I'm having troubles getting my <input type="textarea" /> to have more than 1 row,
I tried adding the properties in the html, like you would do with a normal <textarea></textarea> like this: <input type="textarea" rows="x" cols="x" />
I even tried to do it in CSS, but it did not work.
I've searched all over the internet for a solution, but i can't seem to find a topic regarding my exact problem anywhere.
The textareas i'm experiencing this with, are on this website:
Vilduhelst
When you press the "Lav dit eget dilemma" button they will appear.
I'm looking for either a HTML or CSS solution.
Why not use the <textarea> tag?
<textarea id="txtArea" rows="10" cols="70"></textarea>
Although <input> ignores the rows attribute, you can take advantage of the fact that <textarea> doesn't have to be inside <form> tags, but can still be a part of a form by referencing the form's id:
<form method="get" id="testformid">
<input type="submit" />
</form>
<textarea form ="testformid" name="taname" id="taid" cols="35" wrap="soft"></textarea>
Of course, <textarea> now appears below "submit" button, but maybe you'll find a way to reposition it.
As said by Sparky in comments on many answers to this question, there is NOT any textarea value for the type attribute of the input tag.
On other terms, the following markup is not valid :
<input type="textarea" />
And the browser replaces it by the default :
<input type="text" />
To define a multi-lines text input, use :
<textarea></textarea>
See the textarea element documentation for more details.
The "input" tag doesn't support rows and cols attributes. This is why the best alternative is to use a textarea with rows and cols attributes. You can still add a "name" attribute and also there is a useful "wrap" attribute which can serve pretty well in various situations.