I have little problem with display info with VueJS in inline template.
I have 1 component only with scripts
Answer.vue
<script>
export default {
props: ['answer'],
data(){
return{
editing: false
}
}
}
</script>
I register in app.js
import { createApp } from 'vue';
require('./bootstrap');
require('./fontawesome');
let app=createApp({})
app.component('user-info', require('./components/UserInfo.vue').default);
app.component('answer', require('./components/Answer.vue'));
app.mount("#app")
and i want to implement in answer.blade.php
<answer :answer="{{$answer}}">
<div class="media post">
#include ('shared._vote', [
'model' => $answer
])
<div class="media-body">
{!! $answer->body_html !!}
<div class="row">
<div class="col-4">
<div class="ml-auto">
#can('update',$answer)
Edit
#endcan
#can('delete', $answer)
<form method="POST" class="form-delete" action="{{route("questions.answers.destroy", [$question->id,$answer->id])}}">
#method('DELETE')
#csrf
<button type="submit" class="btn btn-sm btn-outline-danger" onclick="return confirm('Are you sure?')">Remove</button>
</form>
#endcan
</div>
</div>
<div class="col-4">
</div>
<div class="col-4">
<user-info :model="{{$answer}}" label="Answered"></user-info>
</div>
</div>
</div>
</div>
<hr>
</answer>
and i get this in console and this is answers which i cannot see:
https://prnt.sc/wof0gh
Thanks for help :)
Related
This is the ProductDetails.js
const ProductDetails = () => {
return (
<div className='row f-flex justify-content-around'>
<div className='col-12 col-lg-5 img-fluid' id='product_image'>
<img src='./images/logo.png' height='500' width='500'></img>
</div>
<div className='col-12 col-lg-5 mt-5'>
<h3>MARKET DAY, MOSAIC</h3>
<p id='product_id'>Product # hdoeijrokfkrenf</p>
<hr></hr>
<div className='rating-outer'>
<div className='rating-inner'></div>
</div>
<span id='no_of_reviews'>(5 reviews)</span>
<hr></hr>
<p id='product_price'>Ksh 100,000.00</p>
<div className='stockCounter d-inline'>
<span className='btn btn-danger minus'>-</span>
<input type='number' className='form-control count d-inline' value='1' readOnly></input>
<span className='btn btn-primary plus'>+</span>
</div>
<button type='button' id='cart_btn' className='btn btn-primary d-inline ml-4'>Add to cart</button>
<button type='button' id='cart_btn' className='btn btn-primary d-inline ml-4'>Buy now</button>
<hr></hr>
<h4 className='mt-2'>Description</h4>
<p>fybipsimvyuhgsivnmdufnho,vpafovmgfyuvnhifmdkolpoiuhcgtdyhusiociuhfycjsocnbms
cgbcnfmc,dp,olkmncfnmfc,ud.o,cyfunijm,fiudygbhunijmkefdyguhnijmkdf
gbhnjmk,l.oikuytgyhjsk,l.cfkiye6gvyhjkochdjk
</p>
<hr></hr>
<p id='product_seller mb-3'>Sold by: <strong>Tile and Carpet</strong> </p>
<button id='review_btn' type='button' className='btn btn-primary mt-4'
data-togle='modal' data-target='#ratingModal'> Submit Your Review</button>
<div className='row mt-2 mb-5'>
<div className='rating w-50'>
<div className='modal fade' id='ratingModal' tabIndex='1' role='dialog'
aria-labelledby='ratingModalLabel' aria-hidden='true'>
<div className='modal-dialog' role='document'>
<div className='modal-content'>
<div className='modal-header'>
<h5 className='modal-title' id='ratingModalLabel'>Submit Review</h5>
<button type='button' className='close' data-dismiss='modal' aria-label='close'>
<span aria-hidden='true'>×</span>
</button>
</div>
<div className='modal-body'>
<ul className='stars'>
<li className='star'><i className='fa fa-star'></i></li>
<li className='star'><i className='fa fa-star'></i></li>
<li className='star'><i className='fa fa-star'></i></li>
<li className='star'><i className='fa fa-star'></i></li>
</ul>
<textarea name='review' id='review' className='form-control mt-3'></textarea>
<button className='btn my-3 float-right review-btn px-4 text-white' data-dismiss='modal' aria-label='close'>Submit</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
)
}
export default ProductDetails```
This is the App.js file
import { BrowserRouter as Router, Route } from 'react-router-dom'
import ProductDetails from './components/product/ProductDetails'
<Route path="/floor" component={Floor} exact/>
<Route path="/product/:id" component={ProductDetails} exact/>
Here is the store.js
import { legacy_createStore as createStore, combineReducers, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
import { composeWithDevTools } from 'redux-devtools-extension'
import { productsReducer, productDetailsReducer } from './reducers/productReducers'
import { projectsReducer, projectDetailsReducer } from './reducers/projectReducers'
const reducer = combineReducers({
products: productsReducer,
productDetails: productDetailsReducer,
})
let initialState = {}
const middleware = [thunk];
const store = createStore(reducer, initialState, composeWithDevTools(applyMiddleware(...middleware)))
export default store;
This is the message from my console:
> Proxy error: Could not proxy request /product/images/city.jpg from
> localhost:3000 to http://127.0.0.1:4000. See
> https://nodejs.org/api/errors.html#errors_common_system_errors for
> more information (ECONNREFUSED).
Why is the browser not displaying the product image?
-I wan't to do like this: if(!editMode) show create page else show update page because my create and edit using same form so I combine it.
-I'm learning online tutorial but the tutorial show create and edit seperately.
-Please Helps and Thank/.\
<template>
<div v-if="!edit">
<h1>Create Post</h1>
<form #submit.prevent="addPost">
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label>Post Title:</label>
<input type="text" class="form-control" v-model="post.title">
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label>Post Body:</label>
<textarea class="form-control" v-model="post.body" rows="5"></textarea>
</div>
</div>
</div><br />
<div class="form-group">
<button class="btn btn-primary">Create</button>
</div>
</form>
</div>
<div v-else>
<h1>Update Post</h1>
<form #submit.prevent="updatePost">
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label>Post Title:</label>
<input type="text" class="form-control" v-model="post.title">
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label>Post Body:</label>
<textarea class="form-control" v-model="post.body" rows="5"></textarea>
</div>
</div>
</div><br />
<div class="form-group">
<button class="btn btn-primary">Update</button>
</div>
</form>
</div>
</template>
<script>
export default {
data(){
return {
edit:false,
post:{}
}
},
},
//this is for create
methods: {
addPost(){
let uri = 'http://localhost:8000/post/create';
this.axios.post(uri, this.post).then((response) => {
this.$router.push({name: 'posts'});
});
},
},
//this is for get data before update
created() {
let uri = `http://localhost:8000/post/edit/${this.$route.params.id}`;
this.axios.get(uri).then((response) => {
this.post = response.data;
});
},
//this is for update post
updatePost() {
let uri = `http://localhost:8000/post/update/${this.$route.params.id}`;
this.axios.post(uri, this.post).then((response) => {
this.$router.push({name: 'posts'});
});
}
</script>
**I also set this in my app.js**
{
name: 'create',
path: '/create',
component: PostForm,
props: {editMode: false}
},
{
name: 'edit',
path: '/edit/:id',
component: PostForm,
props: {editMode: true}
}
My Error--->when I press edit btn show create page and using addPost function.
Result--> how to use if else to solve this.... Sorry I'm rookie in programming.
I believe you can simply have the js figure out the add or update.
<template>
<div>
<h1 v-if="!edit">Create Post</h1>
<h1 v-else>Update Post</h1>
<form #submit.prevent="postSomething">
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label>Post Title:</label>
<input type="text" class="form-control" v-model="post.title">
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label>Post Body:</label>
<textarea class="form-control" v-model="post.body" rows="5"></textarea>
</div>
</div>
</div><br />
<div class="form-group">
<button v-if="!edit" class="btn btn-primary">Create</button>
<button v-else class="btn btn-primary">Update</button>
</div>
</form>
</div>
</template>
and the js:
methods: {
postSomething(){
if(!this.edit){
this.addPost()
}else{
this.updatePost()
}
},
addPost(){
console.log('should add')
},
updatePost(){
console.log('should update')
}
}
My Vuejs component isn't being rendered in my blade view. What am I doing wrong?
My component is called "star-rating".
Blade view
<div class="container">
<div class="row">
<div class="col-md-4">
**<star-rating></star-rating>**
</div>
<div class="col-md-4">
Rating - statistics
</div>
<div class="col-md-4">
#if(auth()->check())
<form method="post" action="{{ route('review.store') }}">
{{ csrf_field() }}
<h5>Form title</h5>
<div class="form-group">
<label for="headline"><strong>Headline</strong></label>
<input type="text" class="form-control" name="headline" id="headline" placeholder="Review title">
</div>
<div class="form-group">
<label for="headline"><strong>Rating</strong></label>
<input type="text" class="form-control" name="rating" id="rating" placeholder="A number from 1 - 5">
</div>
<div class="form-group">
<label for="headline"><strong>Description</strong></label>
<input type="text" class="form-control" name="description" id="description" placeholder="Tell us about your experience">
</div>
<input type="hidden" name="product_id" value="{{ $product->id }}">
<button class="btn btn-primary" type="submit">Save</button>
</form>
#else
Write a review
#endif
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-md-6">
<ul>
#forelse($product->reviews as $review)
<li>{{ $review->headline }}</li>
#empty
<h6>There are not reviews for this product</h6>
#endforelse
</ul>
</div>
</div>
</div>
#section('scripts')
<script src="{{asset('js/app.js')}}"></script>
#endsection
In the Vuejs, I have imported package for creating a rating system. If you would like to see the docs, are these Star Rating System Vuejs
Vuejs File
import VueStarRating from 'vue-star-rating'
require('./bootstrap');
window.Vue = require('vue');
Vue.component('example-component',
require('./components/ExampleComponent.vue'));
Vue.component('star-rating', VueStarRating);
const app = new Vue({
el: '#app'
});
I'm getting this two errors:
1) [Vue warn]: Unknown custom element: - did you register the component correctly? For recursive components, make sure to provide the "name" option.
2) CSRF token not found: https://laravel.com/docs/csrf#csrf-x-csrf-token
1) Make sure you are compiling the script that you wrote in app.js with
npm run watch
command.
2) I dont see any div element which has #app id. You are saying that I will target #app element with
const app = new Vue({ <br>
el: '#app'
});
But you dont have any. Try to put it:
<div class="container" id="app">
The solution to my problem was solved in two steps:
1) run: npm run dev
2) run: npm run watch
Now, it works
I'm new to Vue JS and I'm building an application with Laravel Spark and trying to utilize Vue as much as possible.
I have a form to simply add an 'Asset Type' with a component. Once the Asset Type is successfully created, a list of properties is grabbed from the database and set to a 'data' attribute. In my view(I'm using an inline template), I have a 'v-for' that creates a form for each property that has two hidden inputs for the property id and the type id, and one "Add" button that assigns the property to the newly created type.
THE PROBLEM:
I can't seem to assign the value of the hidden inputs within the view while using v-models. When I submit one of the forms, the form request data always returns the initial data value from the new SparkForm object.
In other words, I need to assign the hidden input values within the v-for loop in the view.
Here's my component:
Vue.component('new-asset-type', {
props: [],
data() {
return {
// type_id: this.type_id,
properties: this.properties,
newAssetType: new SparkForm({
label: null,
enabled: false,
}),
assignPropForm: new SparkForm({
prop_id: "",
type_id: "",
}),
};
},
methods: {
createType: function () {
Spark.post('/asset-types', this.newAssetType)
.then(response => {
this.type_id = response.type_id;
axios.get('/getTypeNotProps/' + this.type_id).then((response) => {
this.properties = response.data;
console.log(this.properties);
});
})
.catch(response => {
console.log("fail");
});
},
assignProp: function () {
Spark.post('/asset-properties/add', this.assignPropForm)
.then(response => {
console.log(response);
})
.catch(response => {
console.log("fail");
});
}
}
});
And here's my view:
#extends('spark::layouts.app')
#section('content')
<new-asset-type inline-template>
<div class="container">
<!-- Application Dashboard -->
<div class="row">
<div class="col-md-8 col-md-offset-2">
<div class="panel panel-default">
<div class="panel-heading">Add a New Asset Type</div>
<div class="panel-body" id="addTypeForm">
<div class="form-horizontal">
<div class="form-group" :class="{'has-error': newAssetType.errors.has('label')}">
{{ Form::label('label', 'Label', ['class' => 'col-md-4 control-label']) }}
<div class="col-md-6" >
<input type="test" name="label" v-model="newAssetType.label">
<span class="help-block" v-show="newAssetType.errors.has('label')">
#{{ newAssetType.errors.get('label') }}
</span>
</div>
</div>
<div class="form-group">
{{ Form::label('enabled', 'Enabled?', ['class' => 'col-md-4 control-label']) }}
<div class="col-md-6">
<input type="checkbox" name="enabled" v-model="newAssetType.enabled" >
</div>
</div>
<!-- Submit -->
<div class="form-group">
<div class="col-md-8 col-md-offset-4">
<button class="btn btn-primary" #click="createType" :disabled="newAssetType.busy">
Create Asset Type
</button>
</div>
</div>
<div id="assignProps" v-if="newAssetType.successful">
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
Add Property
</button>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Add New Property to Asset Type</h4>
</div>
<div class="modal-body">
<assign-asset-prop v-for="property in properties" class="panel panel-info property-item">
<div class="panel-heading">#{{ property.label }}</div>
<div class="panel-body"><strong>Input Type: </strong>#{{ property.input_type }}
<div class="pull-right">
<input type="hidden" name="prop_id" v-bind:value="property.p_id" v-model="assignPropForm.prop_id">
<input type="hidden" name="type_id" v-bind:value="property.p_id" v-model="assignPropForm.type_id">
<button class="btn btn-primary" #click="assignProp" :disabled="assignPropForm.busy">
Add
</button>
</div>
</div>
</assign-asset-prop>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</new-asset-type>
#endsection
Thanks to the helpful comments, I learned that I shouldn't have been using hidden inputs at all. Instead, I simply passed the variables to the function on the click event.
<button class="btn btn-primary" #click="assignProp(type_id, property.p_id)" >
Add
</button>
Then in my component
methods: {
assignProp: function (type_id, property_id) {
var assignPropForm = new SparkForm({
propvalue: property_id,
typevalue: type_id,
});
Spark.post('/asset-properties/add', assignPropForm)
.then(response => {
console.log(response);
})
.catch(response => {
console.log("fail");
});
}
}
You need store variables at local data() dep., and geting it by getters function.
I've a password_reset.vue script as below:
<template>
<form>
<div class="alert alert-danger" v-if="form.errors.has('photo')">
#{{ form.errors.get('photo') }}
</div>
<div class="row">
<div class="col-md-3">
<div class="label">Current Password</div>
</div>
<div class="col-md-9">
<div class="field--wrapper">
<label for="current_password">Current Password</label>
<input class="nom-fields" type="password"
v-model="form.current_password"
id="current_password" name="current_password"
placeholder="Current Password" value="">
</div>
</div>
</div>
<div class="row">
<div class="col-md-3">
<div class="label">Repeat Password</div>
</div>
<div class="col-md-9">
<div class="field--wrapper">
<label for="password_repeat">Repeat Password</label>
<input class="nom-fields" type="password"
v-model="form.password_repeat"
<div class="row">
<div class="col-md-3"></div>
<div class="col-md-9 text-right">
<button id="change_password"
class="blue-btn" v-on:click="update">
Change Password
</button>
</div>
</div>
</form>
</template>
<script>
export default{
data(){
return{
form: new MyForm({
current_password: '',
new_password: '',
password_repeat: '',
message: ''
})
};
},
methods: {
/**
* Update the user's password.
*/
update(e) {
e.preventDefault();
this.form.startProcessing();
this.$http.post('/account/change_password', this.form)
.then(function(response) {
this.form.finishProcessing();
})
.catch(function(response) {
this.form.setErrors(response.data);
});
},
}
}
</script>
and in my bootstrap.js file, I've:
import './interceptors.js';
import './forms/form.js';
import './forms/errors.js';
import PasswordReset from './settings/password_reset.vue'
new Vue({
el: 'body',
components: {
PasswordReset
},
ready() {
}
});
and in the app.js file I've:
import './bootstrap.js'
HTML:
<body>
<password-reset></password-reset>
</body>
But it seems the component is not getting displayed. I tried to alert a msg in the ready method and it's working fine. I'm loading Vue.js also.