I am using elementUI's pagination component in my VueJS app.
I wish to replace the default 'Go to' text to 'Page' without altering the inner div:
<span class="el-pagination__jump">
Go to
<div class="el-input el-pagination__editor is-in-pagination">
<!----><input type="number" autocomplete="off" min="1" max="6" class="el-input__inner"><!----><!----><!---->
</div>
</span>
How can I do this? Do I have access to the DOM?
Thanks.
You can play with the localization settings. Since the default locale is Chinese, I assume you are already doing this in your main.js
import localeUI from 'element-ui/lib/locale'
import defaultLang from 'element-ui/lib/locale/lang/en'
localeUI.use(defaultLang);
So you have to clone the English locale, modify the el.pagination.goto value and then use this new locale.
Related
I'm trying to use Buefy's tooltip with a content slot, so insted of using the label prop to set tooltip's text, I could use HTML tags to format my text.
I tried to check the component source code, and there is indeed a content slot, but it is not working. Here is my code:
<b-tooltip
position="is-left"
>
<template #content>
My <b>content</b> here
</template>
<b-input
v-on:keyup.native.enter="onEnter"
type="password"
v-model="password"
placeholder="Enter Password"
password-reveal
class="custom-input-style password-field"
></b-input>
</b-tooltip>
Check your buefy version, if it is below 0.9.0 then it won't work
I am looking for a solution where I have a line something this
This line have {{input}} in it and also the {{select}} in it.
Now this line is coming from database from backend and my frontend is Vue JS 2.6
What I want to achieve is I want to parse the {{input}} and convert it into html input tag like
<input type="text" class="some-class">
and same for the {{select}}
<select> <option value="Option value">Option Content</option> </select>
I am not sure how I inject it in the vue I am using vue with vuex
Please guide my, Any help is appreciated
I don't know if I got that right, but you now have a template string that you need to use in your component. You can try to turn the template string into a component and then use it in the parent component.
Vue.component('my-input', {
template: '<input type="text" class="some-class">'
})
<div id="parent-demo">
<my-input></my-input>
</div>
If you only have a {{input}} string and need to convert it to a component, you can write your own conversion function to convert {{input}} to a template string(<input type="text" class="some-class">), and then create the component in the same way as above
I'm new to Vue and I'm looking at an existing code that makes me question, where do the tags <u-col> and <u-row> come from?
My very little understanding of Vue so far is that you can create custom components and then use those components like html tags in the template. But my understanding is that if the component is to be used then it must be exported from where it is created and then imported at where it is being used.
Below is a part of the code that I'm not sure if <u-col> or <u-row> are custom made tags or if they're simply default vue tags? I don't think they're custom tags because I don't see any imports and I haven't found anything in the source code that tells me they are custom tags. But I don't think they are default vue tags either because I haven't seen them from my google searches. The closest I've come to is the <b-col> tag but I know that is from bootstrap.
<template>
<u-row class="mb-4 flex-nowrap">
<u-col class="text-sm text-700 text-right col-2 mr-4">
<span v-if="required" class="text-warning">*</span>{{label}}
</u-col>
<u-col>
<slot />
</u-col>
</u-row>
</template>
<script>
export default {
props: {
label: {
type: String
}
}
</script>
<style>
</style>
Any help is appreciated.
I want to use vue material for my app,
i already install vue-material in my app, and do this in my main.js:
import VueMaterial from 'vue-material'
import 'vue-material/dist/vue-material.min.css'
Vue.use(VueMaterial)
but, when i use some component from vue-material in my index page like this:
<template>
<md-field>
<label>Username</label>
<md-input v-model="username"></md-input>
</md-field>
<md-field>
<label>Password</label>
<md-input v-model="password"></md-input>
</md-field>
</template>
my page show:
when i visit example form input in codepen, form input should like this:
whats wrong with my code?
This happened with me too,
To fix it, you just need to set a theme for your app like this:
import 'vue-material/dist/theme/default.css'
You are probably missing a crucial <form> tag
As per the documentation, removing some stuff for your use case, you should have at least the following wrapped around those <md-field> tags.
<form class="md-layout">
// your form inputs here
</form>
How can I bind HTML to a Vue component property?
In my PHP script I have:
$html = '<div>some text</div>';
$box = "<box_includes
html_text='$html'
></box_includes>";
In my vue template:
<template id="template_box_includes">
{{ html_text }}
</template>
But in my browser I see all the text, including the tags, It's being recognized as a text:
<div>some text</div>
EDIT 2019:
Below answer is outdated as stated by #devman in the comments. Please use v-html instead:
<template v-html="html_text"></template>
Older Answer
In Vue JS, the use of the double braces are escaping HTML. You need to use three to avoid escaping html like so:
<template id="template_box_includes">
{{{ html_text }}}
</template>
You can learn more on this page of the documentation: http://vuejs.org/guide/syntax.html#Raw-HTML
I hope this helps!