I am getting html string from api server to show the data in Vue component.
However, I cannot convert br tag, nbsp;, or such strings which is in the actual response from the api server.
What I want to see:
Hello
World
What I am seeing in the screen right now:
Hello'htmlbrtag'World
Is there any way I could solve this problem?
<template>
<div class="swiper-slide">
<div class="sw-lead-box">
<span class="sw-title">{{ banner.title }}</span>
<span class="sw-tags">{{ banner.content }}</span>
</div>
<div class="img__shadow"></div>
<img class="sw-bg" src="../../static/images/main/m-swiper-bg1.png" alt="" />
</div>
</template>
<script>
export default {
props: {
banner: {
type: Object,
required: true,
},
},
};
</script>
<style></style>
banner.title and banner.content are the items that correspond to the issues I mentioned above.
Is there any Jquery's html() function for vue?
Related
so on this project i was trying to make an image component to display an image from a string props.
here is my component code
this is the component
<template>
<div class="Img-grid">
<div class="container">
<div class="col">
<img :v-bind:src="recipeImage" alt="image-photo">
<p>{{recipeName}}</p>
</div>
</div>
</div>
</template>
<script>
export default {
name: 'ImgGrd'
props: {
recipeImage: String,
recipeName: String
}
}
</script>
this is my where the component display
<template>
<div class="RecipeByYou">
<div class="container">
<ImgGrid recipeName="a" v-bind:recipeImage="imgUrl" />
</div>
</div>
</template>
<script>
import ImgGrid from '../components/Image_Grid.vue'
export default {
name: 'RecipeImage',
components: {
Header,
ImgGrid
},
data () {
return {
imgUrl: 'https://media.sproutsocial.com/uploads/2017/02/10x-featured-social-media-image-size.png'
}
}
}
am i doing anything wrong? because when i inspect the web element it shows this thing, so i was confuse where did i do wrong, is this the correct method?
<img data-v-366ed4fa="" v-bind:src="https://media.sproutsocial.com/uploads/2017/02/10x-featured-social-media-image-size.png" alt="image-photo">
change this code <img :v-bind:src="recipeImage" alt="image-photo"> to <img v-bind:src="recipeImage" alt="image-photo">.
or you can change <img :v-bind:src="recipeImage" alt="image-photo"> to <img :src="recipeImage" alt="image-photo">.
: is shorthand of v-bind, your code :v-bind:src="recipeImage" means v-bind:v-bind:src="recipeImage"
I'm trying to implement a tabbed reusable component in vueJs but I'm getting an error that a particular component is not defined. Below are both components
//TabComponent
<template>
<div>
<div class="row">
<div class="col-lg-12 col-xl-12">
<div class="card-box">
<ul class="nav nav-tabs nav-bordered">
<li v-for="tab in tabs" :key="tab" class="nav-item">
{{tab}}
</li>
</ul>
<div class="tab-content">
<component :is="selectedComponent"></component>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
name: 'TabComponent',
props: [ selectedComponent, tabs ] //The error is coming from this line
}
</script>
I have imported it to this component and currently it shows the error
Uncaught ReferenceError: selectedComponent is not defined
//Entitlements component
<template>
<div>
<tab-component :tabs="tabs" :selectedComponent="selectedComponent" />
</div>
</template>
<script>
import TabComponent from "../../../components/TabComponent";
import List from "./Entitlements/List";
import MyEntitlements from "./Entitlements/MyEntitlements";
export default {
name: 'Entitlements',
components: {List, MyEntitlements, TabComponent},
data(){
return{
tabs: ['List', 'MyEntitlements'],
selectedComponent: 'List',
}
}
}
</script>
HTML attribute names are case-insensitive, so browsers will interpret
any uppercase characters as lowercase. That means when you’re using
in-DOM templates, camelCased prop names need to use their kebab-cased
(hyphen-delimited) equivalents (source)
Try with:
<tab-component :tabs="tabs" :selected-component="selectedComponent" />
Edit:
If you define props as an array, change the list with strings (see "Prop types" here):
props: [ 'selectedComponent', 'tabs' ]
What I'm trying to do is seemingly simple, but I can't seem to figure it out. Basically, I have 2 files:
A PHP file with the following:
...
<user-panel v-if="user.id && loaded" v-bind:user="user" v-bind:name="theUserName"></user-panel>
...
A .Vue component file with the following (that gets compiled into another file):
<template>
<span id="userPanel" class="d-flex align-items-center">
<a href="#" role="button" class="user-dropdown-toggle">
<div class="logged-in d-flex align-items-center">
<span class="d-flex align-items-center justify-contnet-center"></span>
{{name}}
</div>
</a>
</span>
</template>
<script>
export default {
name: "UserPanel",
props: ['user'],
created () {
console.log(this.$refs.myTestField.value)
}
}
</script>
All I'd like to do is pass data from the PHP to Vue into {{name}}. I've tried v-bind, a data-attribute, a hidden input, etc. Any help would be greatly appreciated.
My intention is to transfer data from my .php file to the .js file where the VUE code resides. Here I show you my code. In the proposed example I would like to import a simple string, subsequently I would like to import a JSON. Thank you so much.
File PHP
<div id='app'> <App v-bind:import='Value Import'> C'è QUALCHE PROBLEMA </App> </div>"
File .js
var App = Vue.component("App", {
template: `
<div class="container">
<div>
<h2>{{ titolo }}</h2>
<h3>{{ import }}</h3>
</div>
</div>
`,
props: ['import'],
data() {
return {
color: "color: red",
titolo: "Inizio Container",
};
}
});
new Vue({
el: "#app",
});
Quanto sopra purtroppo non funziona.
Vue single file components are processed on client side.
There are SSR, however, since you have php on your server, you must set up a REST service so you can use fetch or axios to consume server data and present it to the client side.
Let's say you have a php variable that contains string. $phpString
PHP file
...
<my-component v-bind:myProperty="<?php echo $phpString ?>"></my-component>
...
Don't forget to escape $phpString before echoing it.
In your Vue define a property called myProperty:
<template>
<span>
{{ myProperty }}
</span>
</template>
<script>
export default {
props: ['myProperty']
}
</script>
I am new to Vuejs. This is what I need to do.
<div v-for="r in records">
<div v-if="r.something">
<div id="x">
{{ r. something}}
more of r here.
</div>
</div>
<div v-else id="x">
same div as in the block above.
</div>
</div>
What I want do is not define div with id x two times as it is huge.
Make your 'div' a component and refer to it in both places.
There are many ways to define your component. This is example shows just one. If you are using WebPack, use a single file component. You can then have your script, html, and css all in one file that gets precompiled. That's the best way to manage your 'huge' div. Then you can continue to refactor and break it up into more components.
const myComponent = {
template: "<div :id='id'>HELLO, my id is {{id}}. r.foo is {{r.foo}} </div>",
props: {
id: String
},
data() {
return {
r: {
foo: 'bar'
}
}
}
}
<div v-for="r in records">
<div v-if="r.something">
<my-component id='x' />
</div>
<div v-else id="x">
<my-component id='x' />
</div>
</div>
My use case is something like this.
I stored images names in an array called imagesFolder
then I retrieve names from that array and display on my vue component.
This is my code
<template lang="html">
<div class="">
<div class="" v-for="image in imagesFolder">
<img v-bind:src="image" alt="" height="100px" width="auto"><br>
</div>
</div>
</template>
<script>
export default {
data(){
return{
imagesFolder:['src/assets/mickey.png','src/assets/logo.png']
}
}
}
</script>
My question is every time I have to store the static location part src/assets/ instead of doing this. Is there a way to attach this src/assets/ part to the img tag. I hope you understand my question.
You can provide just the filename of the images in an array in your data.
<script>
export default {
data() {
return{
images: ['mickey', 'logo']
}
}
}
</script>
Then, you can loop through and use only the filename of the image as the dynamic value.
<div class="" v-for="image in images">
<img :src="`src/assets/${image}.png`" alt="" height="100px" width="auto"><br>
</div>
You can use a directive:
Vue.directive('src', function (el, binding) {
el.src = 'src/assets/' + binding.value
})
Then you can use v-src:
<img v-src="image"
Now, you are safe to use just file name:
imagesFolder:['mickey.png','logo.png']