I'm trying to put some images in Element-ui of Vue Framework but the images don't appear on the page.. I'm really new in Vue Framework. Anyone please help me to solve it.
<template>
<div>
<el-carousel indicator-position="outside">
<el-carousel-item v-for="item in img" :key="item">
<img :src="item" />
</el-carousel-item>
</el-carousel>
</div>
export default {
name: "Home",
data() {
return {
img: [
require("#/assets/homepage.png"),
require("#/assets/honor.jpg"),
require("#/assets/homepage.png"),
require("#/assets/huaweip30.jpg"),
],
};
},
Thanks
var Main = {
data() {
return {
carouselImages: [
'https://www.gstatic.com/webp/gallery3/1.png',
'https://www.gstatic.com/webp/gallery3/2.png',
],
};
},
};
var Ctor = Vue.extend(Main)
new Ctor().$mount('#app')
#import url("//unpkg.com/element-ui#2.13.2/lib/theme-chalk/index.css");
<script src="//unpkg.com/vue/dist/vue.js"></script>
<script src="//unpkg.com/element-ui#2.13.2/lib/index.js"></script>
<div id="app">
<template>
<el-carousel :interval="6000" height="200px">
<el-carousel-item v-for="item in carouselImages" :key="item">
<img :src="item" class="image">
</el-carousel-item>
</el-carousel>
</template>
</div>
Related
<template>
<div class="test">
<template v-if="arr && arr.length">
<div class="a">rendered in dom</div>
<div class="b">
<span>not render</span>
<el-button>but this child component is created, we can see it in vue-devtool</el-button>
</div>
</template>
<div class="c" v-else>test</div>
<el-dialog append-to-body :modal="false" :visible="visible" #close="visible = false">1</el-dialog>
</div>
</template>
<script>
export default {
name: 'HelloWorld',
data() {
return {
arr: [],
visible: true
};
},
mounted() {
this.arr = [1, 2];
}
};
</script>
There are many solutions for this, e.g:
add key, change a different tag, and so on, but why ?
Most important, if delete the dialog, it could run with expectations!
I am new to inertia js and creating a project using Laravel and inertia js, I am facing an issue that form data is erased after any error display. How to prevent that in inertia.
I have already tried preserveState.
Vue code:
<template>
<template #breadcrumb>
<div>
<div>
<button #click="submit">Save</button>
</div>
</div>
</template>
<div>
<div>
<label>Name</label>
<t-input type="text" v-model="form.name" />
<div v-if="errors['name']">{{ errors["name"] }}</div>
</div>
<div>
<label>Comment</label>
<t-input type="text" v-model="form.comment" />
<div v-if="errors['comment']">{{ errors["comment"] }}</div>
</div>
</div>
</template>
<script>
import { Inertia } from '#inertiajs/inertia'
export default {
components: {
Inertia
},
props: {
form: Object,
errors: Object,
},
methods: {
submit() {
Inertia.post(this.route("post.store"), this.form, { preserveState: true });
},
},
};
</script>
Controller code
public function store(Request $request)
{
$request->validate([
'name' => ['required', 'string'],
'comment' => ['required', 'string'],
]);
$data = [
'name' => $request->get('name'),
'comment' => $request->get('comment'),
];
Post::create($data);
return redirect(route('post'))->with('success', 'Post created.');
}
Try using the form helper (read up on it here https://inertiajs.com/forms) something like this in your Vue component binding on the form props, not the prop you pass into the vue:
<template>
<template #breadcrumb>
<div>
<div>
<button #click="submit">Save</button>
</div>
</div>
</template>
<div>
<div>
<label>Name</label>
<t-input type="text" v-model="myForm.name" />
<div v-if="myForm.error('name')">{{ myForm.error('name') }}</div>
</div>
<div>
<label>Comment</label>
<t-input type="text" v-model="myForm.comment" />
<div v-if="myForm.error('comment')">{{ myForm.error('comment') }}</div>
</div>
</div>
</template>
<script>
import { Inertia } from '#inertiajs/inertia'
export default {
components: {
Inertia
},
props: {
form: Object,
errors: Object,
},
data() {
return {
myForm: Inertia.form(
{
name: this.form.name,
comment: this.form.comment,
},
}
},
methods: {
submit() {
this.myForm.post(this.route("post.store"));
},
},
};
</script>
Parent component has the method "startMethods" which just also has some other method "onDecrementStart ". OnDecrementStart method just only call Alert.
Under this line, added a code example but that code didn't work.
<template>
<div class="parent">
<div class="main">
<img alt="Vue logo" src="../assets/logo.png">
<SettingsBoard :max="maxValue" :start="startValue"
:startInc="startMethods"
/>
</div>
</div>
</template>
<script>
import SettingsBoard from "#/components/SettingsBoard";
export default {
name: "Main",
components: {
SettingsBoard
},
methods: {
startMethods: {
onDecrementStart () {
alert('Decrement')
},
onIncrementStart () {
alert('Incriment')
}
},
}
}
</script>
SettingsBoard component
<template>
<div class="container">
<label>
<button :#click="startInc.onDecrementStart()">-</button>
</label>
</div>
</template>
<script>
export default {
name: "SettingsBoard",
props: {
startInc: Object
},
}
</script>
I want to get like that if it's possible.
<template>
<div class="container">
<label>
<button :#click="startInc.onDecrementStart()">-</button>
<button :#click="startInc.onIncrementtStart()">+</button>
</label>
</div>
</template>
<script>
export default {
name: "SettingsBoard",
props: {
startInc: Object
},
}
</script>
To run a method in the parent component you should emit a custom event which has the parent method as handler :
<label>
<button #click="$emit('decrement')">-</button>
<button #click="$emit('increment')">+</button>
</label>
in parent component :
<div>
<SettingsBoard
#decrement="onDecrementStart"
#increment="onIncrementStart"
/>
...
methods: {
onDecrementStart() {
this.count--;
},
onIncrementStart() {
this.count++;
},
},
LIVE EXAMPLE
Like for example
<router-link :to="{ name : 'criminalView', params : { criminalId : this.criminal.id , criminal : this.criminal } }" tag="a" >
<img class="h-18 w-18 rounded-full mr-4 mt-2" src="{{ asset('assets/images/'.$criminal->photo) }}" id="criminalsPhoto" alt="Criminals View" >
</router-link>
how can i accept those params in my CriminalView.vue which handles the router-view component
This is my routes.js
import VueRouter from 'vue-router';
import CriminalView from './components/CriminalView.vue';
import GroupView from './components/GroupView.vue';
let routes = [
{
path : '/criminal/:criminalId',
name : 'criminalView',
component : CriminalView,
props : { criminals }
},
{
path : '/group/:groupId',
name : 'groupView',
component : GroupView,
},
]
export default new VueRouter({
routes,
linkActiveClass: 'is-active'
});
how am I gonna display this in my template such as like this
<section class="w-2/5 ml-2 font-basic" id="criminalProfile">
<p class="font-basic tracking-normal text-2xl mb-4 mt-4 font-normal text-black mr-2">Criminal Profile of {{ this.criminal.full_name }}</p>
<div class="bg-white px-8 py-8 pt-4">
<div class="text-center">
<div id="avatar" class="inline-block mb-6" >
<img :src="avatarPath" class="h-50 w-50 rounded-full border-orange border-2">
<p class="font-bold mt-2 text-blue">$15,000</p>
<p class="mt-2 text-lg font-bold" >Notable Crimes:
<p class="mt-2 text-lg font-normal" >
<em class="font-bold roman">Offenses</em>Descr..
</p>
</p>
<div class="w-full flex justify-between">
<button class="w-full bg-green-theme p-3 text-white mt-4 ml-2 hover:bg-green-second" href="/criminal/" >View Full Profile</button> </div>
</div>
</div>
</div>
</section>
This is in my script tag..
export default {
props : ['criminals'],
name: 'CriminalProfile',
data(){
return {
criminal : this.criminals,
url : window.App.apiDomain
}
},
}
How can i display the props in my router-view which is there in my CriminalView.vue
I'm not 100% sure about camelCasing for groupId so I'm using groupid. Try it out, and let us know about camelCase in the comments.
props: {
//you could set the watch to this if you need.
//groupid: {default: 1}
},
watch: {
$route(to, from) {
var groupid = (typeof to.params.groupid != 'undefined') ? to.params.groupid : 1;
//... do some stuff
}
},
In order to display data from the route params you should be doing something like this
// start route.js
export default new Router({
mode: 'hash', // https://router.vuejs.org/api/#mode
routes: [
{
path: 'my-route/:criminal',
name: 'MyRoute',
component: MyComponent
}
]
})
// End route.js
<template>
<section>
<div>
{{criminals}}
</div>
</section>
</template>
<script>
export default {
name: 'CriminalProfile',
data(){
return {
criminals: ''
}
},
created(){
this.criminals = this.$route.query.myparam
}
}
</script>
Here it's the router link
<router-link :to="{ name: 'CriminalView', params: { criminalId: 123 }}">Criminal</router-link>
In my case this work perfectly,
Try this:
Using this.$route.params.paramName you can access params in router-view component.
<script>
export default{
data() {
criminal_id:'',
criminal_data: ''
},
created() {
this.criminal_id = this.$route.params.criminalId;
this.criminal_data = this.$route.params.criminal;
}
}
</script>
I'm new to using VueJS, and I'm working on a learning project right now.
I have a component called "Draggable", and another one called "ModalPage".
"ModalPage" is as follows:
The code for this page is below:
<template>
<div class="hello">
<h1>{{ msg }}</h1>
<button #click="propagate">Propagate</button>
<h3>Vue Modals</h3>
<ul id="list">
</ul>
<!-- <div v-html="template"></div> -->
</div>
</template>
<script>
import draggable from '#/components/Draggable.vue';
export default {
name: 'ModelPage',
components: {
draggable,
},
data () {
return {
msg: 'Welcome to the Modal Popup Page',
template: `<draggable></draggale>`,
}
},
methods: {
propagate () {
// console.log("propagated")
list.append(`<draggable></draggale>`)
}
}
}
</script>
I also have a component called "Draggable" and its code is as follows:
<template>
<div id="app">
<VueDragResize :isActive="true" :w="200" :h="200" v-on:resizing="resize" v-on:dragging="resize">
<h3>Hello World!</h3>
<p>{{ top }} х {{ left }} </p>
<p>{{ width }} х {{ height }}</p>
</VueDragResize>
</div>
</template>
<script>
import VueDragResize from 'vue-drag-resize';
export default {
name: 'app',
components: {
VueDragResize
},
data() {
return {
width: 0,
height: 0,
top: 0,
left: 0
}
},
methods: {
resize(newRect) {
this.width = newRect.width;
this.height = newRect.height;
this.top = newRect.top;
this.left = newRect.left;
}
}
}
</script>
What i want to do is to be able to click the "Propagate" button on the page, and have a <draggable></draggable> html element appended to the page, as follows:
<ul id="list">
<draggable></draggable>
</ul>
I'm completely stumped with this. Can anyone help me please?
v-if will do your job
Updated
You can use v-for as discussion:
<template>
<div class="hello">
<h1>{{ msg }}</h1>
<button #click="propagate">Propagate</button>
<h3>Vue Modals</h3>
<ul id="list">
<draggable v-for="index in count" :key="index>
</draggable>
</ul>
<!-- <div v-html="template"></div> -->
</div>
</template>
<script>
import draggable from '#/components/Draggable.vue';
export default {
name: 'ModelPage',
components: {
draggable,
},
data () {
return {
msg: 'Welcome to the Modal Popup Page',
template: `<draggable></draggale>`,
count: 0
}
},
methods: {
propagate () {
// console.log("propagated")
this.count++
}
}
}
</script>