I have the following code snippet of my routes from app.js
let routes = [{
path: "/dashboard",
component: require("./components/Dashboard.vue")
},
{
path: "/tour",
component: require("./components/Index.vue"),
children: [{
name: 'create',
path: '/create',
component: require('./components/product/Create.vue')
}]
},
{
path: "*",
component: require("./components/NotFound.vue")
}
];
Master.blade.php
<div class="sidebar">
<router-link class="btn btn-success" to="/dashboard">
Dashboard
</router-link>
<router-link class="btn btn-success" to="/tour">
Tour
</router-link>
</div>
<div class="content">
<router-view></router-view>
</div>
Index.vue
<template>
<div class="container">
<div class="row mt-5">
<div class="col-md-12">
<div class="card">
<div class="card-header">
<h3 class="card-title">Tours</h3>
<div class="card-tools">
<router-link class="btn btn-success" to="/tour/create">
Add New
<i class="fas fa-plus fa-fw"></i>
</router-link>
</div>
</div>
<!-- /.card-header -->
<div class="card-body table-responsive p-0">
<table class="table table-hover text-center">
<tbody>
<tr>
<th>ID</th>
<th>Name</th>
<th>Days</th>
<th>Price</th>
<th>Type</th>
<th>Image</th>
<th>Meta Title</th>
<th>Meta Description</th>
<th>Actions</th>
</tr>
<tr v-for="tour in tours.data" :key="tour.id">
<td>{{tour.id}}</td>
<td>{{tour.title}}</td>
<td>{{tour.days}}</td>
<td>{{tour.price}}</td>
<td>{{tour.category_id}}</td>
<td>
<i class="fas fa-check text-success" v-if="tour.image"></i>
<i class="fas fa-times text-danger" v-else></i>
</td>
<td>
<i class="fas fa-check text-success" v-if="tour.meta_title"></i>
<i class="fas fa-times text-danger" v-else></i>
</td>
<td>
<i class="fas fa-check text-success" v-if="tour.meta_description"></i>
<i class="fas fa-times text-danger" v-else></i>
</td>
<td>
<button #click="editModal(tour)" class="btn btn-primary btn-sm">Edit</button>
<button
#click="deleteUser(tour.id)"
class="btn btn-danger btn-sm"
>Delete</button>
</td>
</tr>
</tbody>
</table>
</div>
<!-- /.card-body -->
<div class="card-footer"></div>
</div>
<!-- /.card -->
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
tours: ""
};
},
methods: {
initialLoad() {
axios.get("api/tour").then(({
data
}) => (this.tours = data));
}
},
created() {
this.initialLoad();
}
};
</script>
Index.vue shows all the tours that are saved in database.
Add New button is placed in Index.vue to load the Create.vue component in order to create tours.
But clicking on the create button loads NotFound.vue component from * route. No message of any type is given out during mixing and in console.
I also tried:
import create from './components/product/Create.vue';
and replacing component: require('./components/product/Create.vue') with create
And still no progress.
Can anyone point out the my mistake i'm doing here.
create a new file and Save by Tourview.vue inside the components folder.
<template>
<router-view ></router-view>
</div>
</template>
<script>
export default {
data() {
return {
};
},
methods: {
};
};
</script>
and update your routing file like following.
let routes = [{
path: "/dashboard",
component: require("./components/Dashboard.vue")
},
{
path: "/tour",
component: require("./components/Tourview.vue"),
children: [
{
path:'',
component: require("./components/Index.vue")
},
{
name: 'create',
path: '/create',
component: require('./components/product/Create.vue')
}]
},
{
path: "*",
component: require("./components/NotFound.vue")
}
];
Related
i have been wracking my brain for hours on end with no success. My Graphql Mutation for a form isn't working but my Graphql queries are working fine. Any idea why with the below code? I'm using supabase as my database, postgraphile for graphql, nuxtjs for the ui
<template>
<div>
<form method="POST" #submit.prevent="createAgreement()">
<nav class="navbar navbar-dark bg-dark">
<div class="container-fluid">
<a class="navbar-brand">
<input type="reset" class="btn btn-warning" value="Reset"></a>
<a class="navbar-brand">
<input type="submit" class="btn btn-warning" value="Save Agreement"></a>
</div>
</nav>
<br>
<div class="row">
<div class="col-3">
<!-- Tab navs -->
<div id="v-tabs-tab" class="nav flex-column nav-tabs text-center" role="tablist" aria-orientation="vertical">
<a id="v-tabs-home-tab" class="nav-link active" data-mdb-toggle="tab" href="#v-tabs-home" role="tab"
aria-controls="v-tabs-home" aria-selected="true">Create A New Agreement</a>
</div>
<!-- Tab navs -->
</div>
<div class="col-9">
<div id="v-tabs-tabContent" class="tab-scope">
<div id="v-tabs-home" class="tab-pane fade show active" role="tabpanel" aria-labelledby="v-tabs-home-tab">
<div class="table table-responsive">
<table class="table">
<tbody>
<tr>
<td style="text-align: right;">Agreement Name</td>
<td>
<input v-model="name" type="text" required />
</td>
</tr>
<tr>
<td style="text-align: right;">Agreement Type</td>
<td>
<input v-model="type" type="text" name="Type" />
</td>
</tr>
</tbody>
</table>
</div>
<br><br>
<div id="accordionExample" class="accordion">
<div class="accordion-item">
<h2 id="headingOne" class="accordion-header">
<button class="accordion-button" type="button" data-mdb-toggle="collapse"
data-mdb-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
Content
</button>
</h2>
<div id="collapseOne" class="accordion-collapse collapse" aria-labelledby="headingOne"
data-mdb-parent="#accordionExample">
<div class="accordion-body">
<div class="table table-responsive">
<table class="table">
<tbody>
<tr>
<td style="text-align: right;">Excerpt</td>
<td>
<textarea id="excerpt" v-model="excerpt" type="textarea" cols="50" rows="10"
value="Add a short Description"></textarea>
</td>
</tr>
<tr>
<td style="text-align: right;">Description</td>
<td>
<textarea id="excerpt" v-model="content" type="textarea" cols="50" rows="10"
value="Add a Description"></textarea>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
<div class="accordion-item">
<h2 id="headingThree" class="accordion-header">
<button class="accordion-button" type="button" data-mdb-toggle="collapse"
data-mdb-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
Images and Videos
</button>
</h2>
<div id="collapseThree" class="accordion-collapse collapse" aria-labelledby="headingThree"
data-mdb-parent="#accordionExample">
<div class="accordion-body">
<td>
<input v-model="image" type="image" name="headshot" value="Select an image to upload"
help="Select a png, jpg or gif to upload." validation="mime:image/jpeg,image/png,image/gif" />
</td>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</form>
</div>
</template>
<script>
import gql from "graphql-tag";
import allAgreementsList from "~/apollo/queries/sales/agreements";
const ADD_AGREEMENTS = gql`
mutation ($name:String!,$excerpt:String,$type:String,$content:String,$image:String){
createAgreement(objects: {name: $name, excerpt: $excerpt, type: $type, content: $content, image: $image}) {
affected_rows
returning {
name
excerpt
type
content
image
}
}
}`;
export default {
data() {
return {
type: [],
name: " ",
excerpt: " ",
content: " ",
image: " ",
}
},
head: {
title: 'Add New Agreement'
},
methods: {
async addAgreement() {
const name = this.name;
const content = this.content;
const excerpt = this.excerpt;
const type = this.type;
const image = this.image;
await this.$apollo.mutate({
mutation: ADD_AGREEMENTS,
variables: {
name,
excerpt,
type,
content,
image,
},
update: (cache, { data: { insertAgreements }}) => {
// Read data from cache for this query
try {
const insertedAgreement = insertAgreements.returning;
console.log(insertedAgreement)
cache.writeQuery({
query: allAgreementsList
})
}
catch (err) {
console.error(err)
}
}
}).then(() => {
this.$router.push({path: '../sales/agreements'})
}).catch(err => console.log(err));
this.name = ' ';
this.excerpt = ' ';
this.type = ' ';
this.content = ' ';
this.image = ' ';
},
}
}
</script>
Also to note I have complete permissions on my database
So i switched systems and ended up using Apollo-Server, Prisma (my ORM), and Typegraphql just in case anyone wants a working solution with this combination:
import "reflect-metadata";
import { buildSchema } from "type-graphql";
import { ApolloServer } from "apollo-server";
import * as path from "path";
import { PrismaClient } from "#prisma/client";
import { resolvers } from "../prisma/generated/type-graphql";
interface Context {
prisma: PrismaClient;
}
async function main() {
const schema = await buildSchema({
resolvers,
emitSchemaFile: path.resolve(__dirname, "./generated-schema.graphql"),
validate: false,
});
const prisma = new PrismaClient();
await prisma.$connect();
const server = new ApolloServer({
schema,
context: (): Context => ({ prisma }),
});
const { port } = await server.listen(8001);
console.log(`GraphQL is listening on ${port}!`);
}
main().catch(console.error);
It also turned out to be a cors issue.
I have a array of objects(comments from posts kind like facebook comments or any other social network) and I iterate it with an v-for, then I have on each comment a dropdown button with "edit" and "delete" buttons, I would like that when I press the edit button the comment would change to an input so I can edit it, so I added a property click_to_edit initialize in false to each comment object, so when I click on edit it changes the condition that the v-for is related to. But it does not change it, I guess it is that as the property is inside an object it always return false and therefore the condition never changes, but I do not know how else do this. This is the html for the v-for:
<div
class="mb-2"
v-bind:class="'comment_'+post.id"
v-for="(comment, index) in comments"
:key="index"
v-if="comment.id_post === post.id"
>
<div class="row">
<div class="col-img-user-post text-center">
<img
class="rounded-circle img-icon-profile"
:src="routes.user_files+'/'+comment.code+'/'+comment.picture"
alt
/>
</div>
<div class="col">
<div class="row">
<div class="col">
<div class="card-comment">
<div class="row">
<div v-if="!comment.clicked_to_edit" class="col">
<p class="mt-2 mb-2">{{ comment.description }}</p>
<p class="mb-0 font-smaller grey-color">{{ comment.time_ago }}</p>
</div>
<div v-if="comment.clicked_to_edit" class="col">
<input v-model="comment.description" type="text" />
<p class="mb-0 font-smaller grey-color">{{ comment.time_ago }}</p>
</div>
<div class="col-1">
<div class="row dropdown">
<div class="col">
<a
class="font-smaller"
type="button"
:id="'dropdownMenuButtonComment_'+index"
data-toggle="dropdown"
aria-haspopup="true"
aria-expanded="false"
>
<i class="fas fa-lg fa-angle-down grey-color"></i>
</a>
<div
class="dropdown-menu dropdown-menu-right"
:aria-labelledby="'dropdownMenuButtonComment_'+index"
>
<button
class="dropdown-item"
v-if="comment.id_user===profile_info.id_user"
#click="editComment(comment.id, index)"
>
<i class="far fa-edit"></i>
Edit
</button>
<button
class="dropdown-item"
data-toggle="modal"
data-target="#modalDeleteComment"
v-if="comment.id_user===profile_info.id_user"
#click="actionComment(comment.id, 2, index)"
>
<i class="far fa-trash-alt red-color"></i>
<span class="red-color">Delete</span>
</button>
<button
class="dropdown-item"
v-if="comment.id_user!==profile_info.id_user"
#click="actionComment(comment.id, 3)"
>
<i class="far fa-flag"></i>
Report
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
The object comment stated in the data:
comment: {
id: "",
id_post: "",
description: "",
clicked_to_edit: false,
id_user: this.profile_info.id_user,
code: this.profile_info.code,
name: this.profile_info.name,
surname_1: this.profile_info.surname_1,
surname_2: this.profile_info.surname_2,
nick: this.profile_info.nick,
picture: this.profile_info.picture,
role: this.profile_info.id_role,
time_ago: "0 minutes"
},
and the edit function:
editComment(id, index) {
this.comments[index].clicked_to_edit = true;
console.log(this.comments[index]);
},
I purposefully ignored your model, to show a general case. If you need help applying it to your case, let me know.
Vue.config.productionTip = false;
Vue.config.devtools = false;
new Vue({
el: '#app',
data: () => ({
comments: [
{ id: 'one', description: "test 1" },
{ id: 'two', description: "test 2" },
{ id: 'three', description: "test 3" }
].map(i => ({ ...i,
isEditing: false
}))
}),
methods: {
async toggleEditing(comment, index) {
const isOpening = !comment.isEditing;
this.comments
.filter(c => c.isEditing)
.forEach(c => c.isEditing = false);
if (isOpening) {
comment.isEditing = true;
await this.$nextTick();
this.$refs.comments[index].querySelector('input').focus()
}
},
blur: ev => ev.target.blur()
}
})
.comment {
min-height: 21px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<div v-for="(comment, i) in comments" ref="comments" :key="comment.id">
<div v-if="!comment.isEditing"
v-text="comment.description"
class="comment"
#click="toggleEditing(comment, i)"></div>
<div v-else>
<input v-model="comment.description"
#blur="toggleEditing(comment)"
#keyup.enter="blur"
/>
</div>
</div>
</div>
I am building a Vue JS Application, with a Vuetify data-table, and an Algolia InstantSearch Vue Component into it. However currently the data-table, and the InstantSearch index are using different data sources.
How should I integrate the search results from the Algolia index into the Vuetify data-table?
<div id="App">
<v-app id="inspire" v-cloak>
<ais-index app-id="{{ config('scout.algolia.id') }}" index-name="{{ (new App\FoodCat)->searchableAs() }}"
api-key="{{ Algolia\ScoutExtended\Facades\Algolia::searchKey(App\FoodCat::class) }}">
<section id="widget-grid">
<div class="row">
<article class="col-xs-12 col-sm-12 col-md-12 col-lg-12 sortable-grid ui-sortable">
<div class="jarviswidget jarviswidget-sortable" id="wid-id-2" data-widget-editbutton="false" data-widget-deletebutton="false">
<header class="ui-sortable-handle">
<div class="widget-header">
<h2><i class="fa fa-list text-orange"></i> Food Categories List</h2>
</div>
<div class="widget-toolbar smart-form">
<label class="input">
<i class="icon-append fa fa-search"></i>
<ais-input placeholder="Search By Keyword"></ais-input>
</label>
</div>
<div class="widget-toolbar smart-form">
<label class="input"> <i class="icon-append fa fa-plus-square-o"></i>
<input v-model="form.inputs.title.val" type="text" class="form-control" :class="{ 'is-invalid': form.errors.title }" name="title" value="" :placeholder="(form.errors.title) ? 'Category Title Required' : 'Add Food Category'" />
</label>
</div>
<button class="btn btn-sm text-white bg-orange widget-hdr-btn" v-html="form.btnText" #click.prevent="(formMode == 'add') ? add() : save()"></button>
<button class="btn btn-sm btn-danger widget-hdr-btn" #click="deleteSelected"><span class="fa fa-trash"></span> Delete Selected</button>
</header>
<!-- widget div-->
<div role="content" class="widget-content no-padding">
<!-- widget content -->
<div class="widget-body">
<ais-results>
<template scope="{ result }">
<div>
<h1>#{{ result.title }}</h1>
<h4>#{{ result.slug }}</h4>
</div>
</template>
</ais-results>
<v-progress-linear :indeterminate="true" :height="3" color="#c79121" :active="loadingVal"></v-progress-linear>
<v-data-table v-model="selected" :headers="headers" :items="collection" :pagination.sync="pagination" select-all item-key="id" class="elevation-1" >
<template v-slot:headers="props">
<tr>
<th><v-checkbox :input-value="props.all" color="#c79121" :indeterminate="props.indeterminate" primary hide-details #click.stop="toggleAllSelected"></v-checkbox></th>
<th v-for="header in props.headers" :key="header.text"
:class="['column sortable', pagination.descending ? 'desc' : 'asc', header.value === pagination.sortBy ? 'active' : '']"
#click="changeSort(header.value)">
<v-icon small>arrow_upward</v-icon>
#{{ header.text }}
</th>
</tr>
</template>
<template v-slot:items="props">
<tr :active="props.selected" #click="props.selected = !props.selected">
<td class="text-center align-middle">
<v-checkbox :input-value="props.selected" primary hide-details color="#c79121"></v-checkbox>
</td>
<td class="text-center align-middle">#{{ props.item.id }}</td>
<td>#{{ props.item.title }}</td>
<td>#{{ props.item.slug }}</td>
<td class="text-right align-middle">
<button class="btn btn-primary btn-sm" #click="edit(props.item.id)"><span class="fa fa-edit"></span> Edit Food Category</button>
<button class="btn btn-danger btn-sm" #click="remove(props.item.id)"><span class="fa fa-trash"></span> Delete Food Category</button>
</td>
</tr>
</template>
<template slot="no-data">
<p class="text-xs-center">No Data</p>
</template>
</v-data-table>
</div>
</div>
</div>
</article>
</div>
</section>
</ais-index>
</v-app>
</div>
var app = new Vue({
el: '#App',
mixins: [ crudFunctionsMixin ],
data: () => ({
model: "food-cat",
modelName: "Food Category",
modelNamePlural: "Food Categories",
form: {
inputs: {
id: { val: '', save: true },
title: { val: '', save: true, add: true },
slug: { val: '', save: true, add: true },
},
btnText: "<i class='fa fa-plus-square-o'></i> Add Food Category",
errors: false
},
formSearch: {
inputs: {
keywords: ''
}
},
headers: [
{ text: 'ID', value: 'id', sortable: true },
{ text: 'Title', value: 'title', sortable: true },
{ text: 'Slug', value: 'slug', sortable: true },
{ sortable: false }
],
pagination: {
sortBy: 'title'
},
collection: []
}),
watch: {
},
methods: {
fetch() {
$.get(`/${this.model}/fetch`, (r) => {
if(r.successMsg) {
this.collection = r.collection;
}
});
}
}
});
app.fetch();
I want to ask a question concerning vue-validator but it is not working on JSFiddle. Can someone please help me check what the issue is so that I can go ahead and ask the main question
See JSFiddle
Html:
<div id="app">
<validator name="instanceForm">
<form v-on:submit.prevent="addInstance()">
<div class="form-group">
<input id="'instancetext" type="text" class="form-control" placeholder="Enter new Instance" v-validate:instancetext="{ required: { rule: true, message: 'What is the instance ?'}}" v-model="todo.name">
<div class="errors" v-if="showErrors">
<span v-if="$instanceForm.instancetext.required">{{$instanceForm.instancetext.required}}</span>
</div>
</div>
<div class="form-group">
<button class="btn btn-default"> <i class="fa fa-plus"> </i> Add
</button>
</div>
</form>
</validator>
<div class="">
<div v-for="todo in todoStore" class="list-group">
<div class="list-group-item">
<h4>
Main Card
</h4> {{todo.name}} {{todo.id}}
</div>
<div class="list-group-item nopadding">
<button class="btn btn-xs btn-danger margin-10" v-on:click="todoDelete(todo)">
<i class=" fa fa-trash"></i>
</button>
<form #submit="addNoteInstance">
<div class="form-group">
<input id="note-#{{note.id}}" type="text" class="form-control" name="note-#{{note.id}}" placeholder="Enter new Note Instance" v-model="name">
<button type="submit"><i class="fa fa-plus"> Add Note Instance</i></button>
</div>
</form>
</div>
<div v-for="note in todoNoteStore" class="list-group nopadding nomargin">
<div v-if="todo.id == note.id">
<div class="list-group-item">
<h4>
Note fore card {{todo.id}}
</h4> {{note.id}}{{note.name}}
</div>
<div class="list-group-item nopadding">
<button class="btn btn-xs btn-danger margin-10" v-on:click="removeNoteInstance(note)">
<i class=" fa fa-trash"></i>
</button>
</div>
</div>
</div>
</div>
</div>
<pre>{{ $data | json }}</pre>
</div>
Js:
new Vue({
el: '#app',
data: function() {
return {
showErrors: false,
todo: {
id: 1,
name: '',
completed: false,
check: ''
},
todoNote: {
id: 1,
name: '',
completed: false,
check: ''
},
todoStore: [
],
todoNoteStore: [
]
}
},
methods: {
addInstance: function() {
if (this.$instanceForm.valid) {
this.todoStore.push(this.todo);
this.todo = {};
this.showErrors = false;
} else {
this.showErrors = true;
}
},
addNoteInstance: function(e) {
e.preventDefault();
this.todoNoteStore.push({
"id": 1,
"name": this.name,
"completed": false,
"check": ''
});
this.name = '';
},
removeNoteInstance: function(note) {
this.todoNoteStore.remove(note);
}
}
});
css:
.nopadding {
padding-top: 0px;
!important;
padding-bottom: 0px;
!important;
}
.nomargin {
margin: 0px;
}
There are two problems here.
The CDN you are using for Vue-Validator (v2.1.7) seems to be broken. The links for 2.1.6 and 3.0.0-alpha1 seem to be fine. (this is specifically referring to links on cdnjs)
Vue-Validator 2.x only works with Vue 1.x. Your CDN for Vue is pointing to Vue 2.0.3.
So, either use Vue 1.x and a a working version of Vue-Validator 2.x, or use Vue 2.x and Vue-Validator 3.x (which is currently in alpha).
I created app with angularjs 1.5 component router, how could I let parent component pass values to child component inside and child component binds callbacks to the parent component like:
app.js
angular.module('newsApp',['ngComponentRouter'])
.config(['$locationProvider', function($locationProvider) {
$locationProvider.html5Mode(true);
}])
.value('$routerRootComponent', 'myNews')
components.js
angular.module('newsApp')
.component('myNews', {
templateUrl: '/myNews.html',
controller: ['newsFactory',ShamraNewsCtrl],
$routeConfig: [
{path: '/', name: 'MyLatestNews', component: 'myLatestNews', useAsDefault: true},
{path: '/:category', name: 'MyNewsList', component: 'myNewsList'},
]
}).component('myLatestNews', {
templateUrl: '/latestNews.html',
controller: ['newsFactory', myLatestNewsCtrl],
}).component('myNewsList', {
templateUrl: '/newsList.html',
controller: ['newsFactory', myNewsListCtrl],
})
myNews.html
<div class="input-group">
<input type="text" class="form-control" ng-bind="$ctrl.query" placeholder="Search for...">
<span class="input-group-btn">
<button class="btn search-btn btn-success" type="submit">
<i class="fa fa-search"></i>
</button>
</span>
</div>
<div>
<div class="sh-news-cat list-group">
<a ng-repeat="(key, catVal) in $ctrl.categories" class="list-group-item" ng-class="{active:$ctrl.select.selected == key}" ng-link="['MyNewsList', {category: key}]">
{{ catVal}}
<span ng-show="$ctrl.selected.spinner == key"><i class="fa-lg fa fa-spinner fa-spin"></i></span>
</a>
</div>
</div>
<div>
<ng-outlet></ng-outlet>
</div>
latestNews.html
<div class="last-news-container">
<div class="latest-news" ng-repeat="(key, newsList) in $ctrl.latestNews">
<h3 class="section-title">
{{ newsList.title}}
</h3>
<hr>
<div class="section-body">
<div class="news-item" ng-repeat="sectionList in newsList.result">
<div class="news-info">
<h3>{{ sectionList.title }}</h3>
<p>{{ sectionList.content }}</p>
</div>
</div>
</div>
<div class="more-news">
<a ng-link="['MyNewsList', {category: key}]" ng-hide="$ctrl.seemore"> see more ... </a>
</div>
</div>
</div>
so when I click on seeMore in latestNews.html I want to (sent to OR change) category value in myNews Component
and when use type in input box i need to pass this value to another component