I try to render some html text loaded in a json file.
the textstring holds an class="" css style
"example": word 1<br><span class=\"main-color\">word 2</span> word 3"
the vuejs part looks like this:
<p v-html="example"> </p>
the scoped css:
.main-color {
color: #ff00ff;
}
the html code looks as expected in debugger, but the text was not rendered! why?
You are missing a " at the start of the variable
This works
<script setup>
import { ref } from 'vue'
const example = ref("word 1<br><span class=\"main-color\">word 2</span> word 3")
</script>
<template>
<p v-html="example"> </p>
</template>
<style>
.main-color {
color: #ff00ff;
}
</style>
Related
I am making a component InputText.vue as follows:
<template>
<div class="row">
<div class="col-sm-12">
<div class="form-group">
<h4>Edit Text:</h4>
<textarea class="form-control" cols="50" rows="4" placeholder="Enter text here..." v-model="textBoxInput" #keyup="textChanged"></textarea>
</div>
</div>
</div>
</template>
<script>
export default{
data: function(){
return {
textBoxInput: ""
}
},
methods: {
textChanged: function(){
this.$emit('displayTextChanged', this.textBoxInput);
}
}
}
</script>
Then I am registering and using it in CardFront.vue component as follows:
<style>
.edit-area {
padding: 20px;
height: 800px;
background-color: #d2f9f9;
}
.card-display {
padding: 20px;
height: 800px;
}
</style>
<template>
<div class="row">
<div class="card col-sm-6 edit-area">
<cc-text-area></cc-text-area>
</div>
<div class="card col-sm-6 card-display">
</div>
</div>
</template>
<script>
import TextInput from './TextInput.vue'
export default{
components: {
ccTextArea: TextInput
}
}
<script>
It gives this error:
Error
Please help me out. I am using Vue version 2. Whenever I try to refresh the page, it gives error like: [Vue warn]: Unknown custom element: - did you register the component correctly? For recursive components, make sure to provide the "name" option.
I am making a component InputText.vue as follows:
Check that the filename and component names match.
If you import TextInput from './TextInput.vue' in the using component, then also make sure you name your component that, and optionally add a name property as suggested in the comments.
// TextInput.vue (not InputText.vue)
export default {
name: 'TextInput',
...
}
I solved the issue. Thank you so much everyone for your help. The issue lied in the closing script tag in CardFront.vue component.
I was trying to implement a reusable card component, so I printed them out inside variable properties that is changed image by image
This is my code. As for title, it works perfectly. I implemented it many times, so my issue is different. I also added this props' text inside mustaches, so I can change link and image out of my card, but it doesn't work, so I need your help. I might just not understand how text interpolation works. But I think that vue supports the way to create reusable cards within a component
<template>
<RouterLink class="card" to="{{ link }}">
<div class="card__background" style="background-image: url({{ image }})"></div>
<div class="card__content">
<h3 class="card__heading">{{ title }}</h3>
</div>
</RouterLink>
</template>
<script>
import { RouterLink } from 'vue-router';
export default {
props: ['link', 'image', 'title'],
created() {
console.log(this.link)
console.log(this.image)
console.log(this.title)
},
}
</script>
I think you need to use the v-bind directive. This directive allows you to bind the value of an HTML attribute to a dynamic expression.
Here's how you can modify your code to use the v-bind directive:
<template>
<RouterLink class="card" v-bind:to="link">
<div class="card__background" v-bind:style="{ backgroundImage: `url(${image})`
}"></div>
<div class="card__content">
<h3 class="card__heading">{{ title }}</h3>
</div>
</RouterLink>
</template>
<script>
import { RouterLink } from 'vue-router';
export default {
props: ['link', 'image', 'title'],
created() {
console.log(this.link)
console.log(this.image)
console.log(this.title)
}
}
</script>
I am new to vueJS.
What I want to do is passing parameters to a component, depending on the selection of the routes. Here is my App.vue:
<template>
<div id="main">
<header>
<h1 style="color:red">{{msg}}</h1>
</header>
<div>
<aside class="sidebar">
<router-link v-for="el in this.$router.options.routes" :to="el">
{{el.name}}
</router-link>
</aside>
<SubMenu></SubMenu>
<div class="content">
<router-view></router-view>
</div>
</div>
</div>
</template>
<script>
import SubMenu from './components/SubMenu.vue'
export default {
components: {
'SubMenu': SubMenu
},
data() {
return {
msg: 'Welcome to Your Vue.js App' }
}
}
</script>
<style>
#import 'style.css';
#import 'grid.css';
</style>
and the SubMenu component I would like to make dynamic:
<template>
<div>
something dynamic
</div>
</template>
How can I pass some parameters to use in the component?
thank you
Your App.vue can be like this:
<template>
<div id="main">
<header>
<h1 style="color:red">{{msg}}</h1>
</header>
<div>
<aside class="sidebar">
<router-link v-for="el in this.$router.options.routes" :to="el">
{{el.name}}
</router-link>
</aside>
<SubMenu :menuTitle="subMenuTitle"></SubMenu>
<div class="content">
<router-view></router-view>
</div>
</div>
</div>
</template>
<script>
import SubMenu from './components/SubMenu.vue';
export default {
components: {
SubMenu
},
data() {
return {
subMenuTitle: "This is the sub menu",
msg: 'Welcome to Your Vue.js App'
}
}
}
</script>
<style>
#import 'style.css';
#import 'grid.css';
</style>
The SubMenu.vue component could be like this:
<template>
<div>
<h2>{{ menuTitle }}</h2>
something dynamic
</div>
</template>
<script>
export default {
name: "SubMenu",
props: {
menuTitle: String,
}
}
</script>
In the SubMenu component that was used in App.vue, notice the colon that appears before the menuTitle attribute. When you do that before an attribute, the value of that attribute would be evaluated by Vue and passed to the component. You can pass literal Javascript expressions or items in your App.vue component.
In the SubMenu component, you can use the props in whatever way you can. If the prop's value is an array, you can use the v-for directive with it to create a list of items in the SubMenu.
Welcome to SO,
In Vue.js passing parameters to components is called "Props"
You can pass props to your SubMenu like below
<SubMenu :id="12345" someText="Some Text About Something" :dataArray="[1,2,3,4,5]" />
then inside your SubMenu component you can define Prop Types as below
props: ['dataArray']
or
props: {
dataArray: {
type: Array,
default: []
}
}
After that you can use the data you passed to your liking
You can also read up on this Vue Documentation regarding the Props, which has much more detailed explanations about various Props related stuff and sample code
Ok many thanks to both.
But what if I would like to pass something that depends on the voices in router-link? I mean, router-link prints a menu with 4 voices...what if I would like a behavior like this:
click on voice1 in router-link ---> pass this object ['input1', 'input2'] to SubMenu
click on voice2 in router-link ---> pass this other object ['input3', 'input4', 'input5'] to SubMenu
and so on.
thanks again :)
In my default layout I have header and footer for every page. But in error pages I need a full page without header and footer. So I made another layout and I'm calling it in the export default section. But it's still have header and footer.
default.vue
<template>
<div>
<app-header></app-header>
<nuxt />
<app-footer></app-footer>
</div>
</template>
<script>
import Header from '~/components/Header.vue'
import Footer from '~/components/Footer.vue'
export default {
components: {
'app-header': Header,
'app-footer': Footer,
}
}
</script>
error.vue
<template>
<div class="container">
<h1 v-if="error.statusCode === 404">Page not found</h1>
<h1 v-else>An error occurred</h1>
<nuxt-link to="/">Home page</nuxt-link>
</div>
</template>
<script>
export default {
props: ['error'],
layout: 'fullpage' // you can set a custom layout for the error page
}
</script>
fullpage.vue
<template>
<div>
<nuxt />
</div>
</template>
Where I'm wrong?
You can do like this
1 - create a layouterror.vue file inside layouts folder (Put nothing inside just the basic code).
<template>
<div>
</div>
</template>
<script>
export default {}
</script>
<style>
</style>
2 - create a error.vue file inside layouts folder.
3 - and pass your error file a layout like this =>
export default {
layout: 'layouterror'
}
Maybe its help
Thanks !
ON Your Nuxt Project Folder called layouts, Create a file named error.vue and it will automatically detect all your 404 error which is page not found.
error.vue
<template>
<div class="error-page">
<h1>Oops, something went wrong!</h1>
<p>Back to safety!</p>
</div>
</template>
<style scoped>
.error-page {
text-align: center;
}
.error-page a {
text-decoration: none;
color: red;
}
.error-page a:hover,
.error-page a:active {
color: salmon;
}
</style>
I am using v-text-field without vuetify.min.css just use stylus.
Here is my code.
<template>
<v-text-field type="text" name="password"></v-text-field>
</template>
<style lang="stylus" scoped="scoped">
.input-group_details {
XXX
}
</style>
I am trying to hide some divs in v-text-field.
But I got nothing changed.
That is not possible using scoped styles (That's the point of scoping)
What you could do is either passing down a prop which indicates that the divs are hidden or handle it globally.
passing down a prop:
const textField = {
template: `
<div>
<div>Always shown</div>
<div v-if="shown">
Conditionally shown
</div>
</div>
`,
props: { shown: Boolean }
};
Vue.component('v-text-field', textField);
new Vue({}).$mount('#app');
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.4/vue.min.js"></script>
<div id="app">
<b>shown = true:</b>
<v-text-field :shown="true"></v-text-field>
<br>
<b>shown = false:</b>
<v-text-field :shown="false"></v-text-field>
</div>
As per https://vue-loader.vuejs.org/en/features/scoped-css.html#notes
you need to use >>> operator for CSS
So this should work:
<style scoped>
>>> .input-group_details {
//your css
}
</style>
You can use lang="stylus" and it will work, but your IDE might throw some syntax errors.
I'm not sure what's correct stylus syntax for that.
Note that it was implemented in v12.2.0