I've been having troubles with my new side-project. Saw Vue.js, thought it was cool and gave it a try.
This is where I insert my new blog post:
<input class="form-control" placeholder="Title" v-model="header" name="title" type="text" value="">
And this is where it should update:
<div id="create_post" class="site-heading">
<h1>New post</h1>
<hr class="small">
<span class="subheading"></span>
</div>
This is my javascript file:
new Vue({
el: '#create_post',
data: {
header: 'New post',
subheader: '...'
}
});
If i put input below the place it should update, it won't work but if the input comes first, then it works like a charm.
How should I continue?
I told that in my comment i posted, and v-model has to be without .lazy ending to make it update in real time.
So the whole thing has to be in div #app and model has to be like v-model="header", not v-model="header.lazy"
This is hat you need:
new Vue({
el: '#app',
data: {
header: 'Post Title'
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.10/vue.min.js"></script>
<div id="app">
<input v-model="header" name="title" type="text" value="">
<h1>{{ header }}</h1>
</div>
What you are doing wrong is that, your vue element is create_post and input is out of that element, so Vue can't recognise v-model on that
Related
I want to autosave the content of tinyMce editor
I'm using tinmce version 5.2.2 with laravel V7
tinymce configuration in app.js
require('./bootstrap');
require('tinymce/themes/silver');
require('tinymce/plugins/image');
require('tinymce/plugins/code');
require('tinymce/plugins/save');
import tinymce from 'tinymce';
tinymce.init({
selector:'textarea#inputQuestionTitle',
height:400,
setup: function(editor) {
editor.on('Change Keyup', function () {
editor.save();
//tinyMCE.triggerSave() <-- also tried
});
}
With following View
#extends('dashboard.layout')
#section('content')
<form id='addQ' action="{{route('questions.store')}}" method="post" enctype="multipart/form-data" >
#csrf
<div class="form-row align-items-center " >
<div class="col-md-12">
<label class="sr-only" for="inputQuestionTitle">Title</label>
<textarea name="title" class="form-control mb-2 " id="inputQuestionTitle" placeholder="Question Title"> </textarea>
</div>
</div>
<div class="form-row">
<button type="submit" class="btn btn-primary mb-2">Add new category </button>
</div>
</form>
<script type="text/javascript" src="{{asset('js/app.js')}}"></script>
<script type="text/javascript">
$(function(){
$('#addQ').submit(function(e){
e.preventDefault();
var frmdata = $(this).serialize();
console.log(frmdata);
});
});
</script>
#endsection
Outputs
I had using jquery to show input request with console.log
As showed in output title field does not returns any value
Please tell me how i autosave the content of tinymce editor and send it with input request ..
I had also tried to tinymce.triggerSave() before serialize() method of ajax so that input request will take tinymce content but not works
Instead of trying to update the textarea via the triggerSave() or save() methods while someone is editing the content I would just place tinymce.triggerSave() at the very beginning of the function that submits the page. This will ensure that the triggerSave() is called directly before you grab the content from the textarea.
I am learing vue with laravel.
I want to display message in the input tag with v-model, but it's not working.
<div class="card" id="myAppId">
<p>#{{ message }}</p>
<input type="text" v-model="message" class="form-control">
</div>
<script src="{{ asset('js/vue.js') }}"></script>
<script>
new Vue({
el: "#myAppId",
data: {
message : 'Hello Vue Js'
}
});
</script>
It display only <p>#{{ message }}</p> with an empty input field.
You can just initialize that v-model variable with the initial value.
This should achieve what you are looking for:
data: {
message: 'initial_message',
}
My app.js
require('./bootstrap');
window.Vue = require('vue');
import Vue from 'vue'
import Buefy from 'buefy'
Vue.use(Buefy)
// Vue.component('example-component', require('./components/ExampleComponent.vue').default);
Vue.component('edit-delete-dropdown', require('./components/Dropdown.vue').default);
Vue.component('flash-message', require('./components/FlashMessage.vue').default);
Vue.component('store-create-form', require('./components/StoreCreateForm.vue').default);
const app = new Vue({
el: '#app'
});
My StoreCreateForm.vue
<template>
<section>
<h1 class="title"> Create a new store </h1>
<form :action="createRoute" method="post" role="form">
<input type="hidden" name="_token" :value="csrfToken">
<b-field label="Name">
<b-input placeholder="Store Name" icon-pack="fas" icon="store">
</b-input>
</b-field>
<b-field label="Address">
<b-input placeholder="Store Address" icon-pack="fas" icon="location-arrow">
</b-input>
</b-field>
<b-field label="Description">
<b-input type="textarea" placeholder="Store Description" icon-pack="fas" icon="info-circle">
</b-input>
</b-field>
<b-field>
<button type="submit" name="button" class="button is-primary"> Create </button>
<a class="button is-light" :href="previousUrl"> Cancel </a>
</b-field>
</form>
</section>
</template>
<script>
export default {
props: {
createRoute: String,
csrfToken: String,
previousUrl: String,
}
}
</script>
The story is that I use the element in another blade file:
<store-create-form
create-route="{{ route('users.stores.store', auth()->user()) }}"
csrf-token="{{ csrf_token() }}"
previous-url="{{ url()->previous() }}">
</store-create-form>
and Vue gives me the warning
**[Vue warn]: Unknown custom element: <store-create-form> - did you register the component correctly? For recursive components, make sure to provide the "name" option.**
and doesn't display the component even though I can use the other two components 'edit-delete-dropdown' and 'flash-message' in my application. I also run npm run watch to compile files when there is a change.
I've already checked other answers on StackOverflow and other forums but seems like nothing works.
Any thoughts on this hassle?
Your help will be appreciated.
// Updated:
I think the problem is something with Laravel Mix. I tried changing something in other components and the notification from Mix is 'Build successfully' but it doesn't change in the view (it still worked just fine yesterday)
Just disable cache in the Network tab (F12) and everything works!
Thank you for all your help!
You need to give your component a 'name'
<script>
export default {
name: 'store-create-form'
props: {
createRoute: String,
csrfToken: String,
previousUrl: String,
}
}
</script>
I am using vuejs v.2, In my data structure I have products and keywords
they have many-to-many relationship. To attach keywords to product I have list of keyword's checkbox and when user submit only checked keyword should be attach to product
<div class="col-md-6" v-for="keyword in keywords">
<div class="checkbox">
<label>
<input type="checkbox" />
{{ keyword.name }}
</label>
</div>
</div>
Here I can not bind keyword.id as value (v-bind:value).
I just want to submit checked keyword ids to server
Please show me the correct way
I think the mistake you might be doing is not using v-model with an array data variable, following is working code:
vue component:
var demo = new Vue({
el: '#demo',
data: function(){
return {
keywords: [
{name: 'key1', id: 1 },
{name: 'key2', id: 2 },
{name: 'key3', id: 3 }
],
checked: []
};
}
})
and in HTML:
<div id="demo">
<div class="checkbox">
<label v-for="keyword in keywords">
<input type="checkbox" :id="keyword.name" v-bind:value="keyword.id" v-model="checked"/>
{{ keyword.name }}
<br>
</label>
<br>
checked value: {{checked}}
</div>
</div>
Working fiddle here
Basically i have a value from a database ($learner->idnumber)
I then have a form which posts using submithandler to process.php (this edits database)
Now this is the bit im stuck on, im trying to get the php db value $learner->idnumber to update without page refresh once the form has been processed.
I have found:
$("#pinnumber").load("profile.php #pinnumber");
but im not quite sure on how to implement this.
This is my code:
<a id="pinlink">edit</a>
<div id="results"><div>
<div id="pinnumber">
'.$learner->idnumber.'
<div>
<div id="pincontent" style="display:none;">
<form name="myform" id="myform" method="POST">
<input type="text" name="idnumber" id="idnumber" size="20" value=""/>
<input type="submit" name="submit" value="Update">
</form>
<div>
$(document).ready(function(){
$("#pinlink").click(function () {
$("#pincontent").show();
});
$("#myform").validate({
debug: false,
rules: {
idnumber: "required",
},
messages: {
idnumber: "Please enter your PIN",
},
submitHandler: function(form) {
$("#pincontent").hide();
// do other stuff for a valid form
$.post('process.php', $("#myform").serialize(), function(data) {
$('#results').html(data);
});
}
});
});
Any help would be greatly appreciated.
I included:
print "".$_POST['idnumber']."";
in process.php before the save to db code.
this then printed into:
<div id="results"><div>
when form was submitted.