سلام
برای نمایش ادیتور حتما نیاز به دو بار کلیک کردن دکمه ادیت هست. هر راهی رفتم جواب نداد. با کلیک دکمه ویرایش متد editme اجرا میشه. و editing را true میکنه و دیتا در کادر مربوطه نمایش داده میشه ولی ادیتور لود نمیشه.حالا یک بار دیگخه اگر روی دکمه ویرایش بزنم دیتا در ادیتور نمایش داده میشه.
<template>
<div :id="'reply-'+id" class="card text-left">
<div class="card-header bg-color-dark text-light text-uppercase" style="padding:0rem 1.25rem ;">
<div class="row">
<div class="col-11">
<a :href="url+'/profiles/'+data.owner.username" v-text="data.owner.Firstname+' '+data.owner.Lastname">
</a>-<span v-text="ago"></span>
</div>
<div class="col-1">
<div class="row" v-if="signedIn">
<favorite :reply="data" :url="url+'/replies'" ></favorite>
</div>
</div>
</div>
</div>
<div class="card">
<div class="card-body">
<div v-if="editing">
<div class="form-group">
<span :class='classes.errortext' v-if="form.errors().has('body')" v-text="form.errors().get('body')"></span>
<textarea
:class="form.errors().has('body')?classes.errorborder:classes.form"
name="body" id="bodyforum" class="form-control" row="5" v-html="form.body" v-model="form.body"> </textarea>
<a class="btn btn-primary btn-sm" @click="update">ذخیره</a>
<a class="btn btn-primary btn-sm" @click="editing=false">انصراف</a>
</div>
</div>
<div v-else v-html="body">
</div>
</div>
<div class="card-footer bg-color-grey" v-if="canUpdate" style="padding:0rem 1.25rem ;">
<div class="row">
<button class="mb-1 mt-1 mr-1 btn btn-outline btn-sm btn-primary" @click="editme"><i class="fas fa-edit"></i> </button>
<button class="mb-1 mt-1 mr-1 btn btn-outline btn-sm btn-danger" @click="destroy"><i class="fas fa-times"></i> </button>
</div>
</div>
</div>
</div>
</template>
<script>
import formeditreply from '../../../node_modules/vuejs-form'
import Favorite from './favorite.vue';
import moment from 'moment';
export default {
props:['data','url'],
components:{formeditreply,Favorite},
data(){
return{
id:this.data.id,
editing:false,
body:this.data.body,
form: formeditreply({
body:this.data.body,
})
.rules({
body: 'required',
})
.messages({
'body.required': 'محتوای خود را در کادر مربوطه درج نمائید',
}),
}
},
computed:{
ago(){
return moment(this.data.created_at).locale('fa').fromNow()+'...';
},
signedIn(){
return window.App.signedIn;
},
canUpdate(){
return this.authorize(user=>this.data.user_id==user.id);
},
classes: $this => ({
errortext: 'errortext',
errorborder:'errorborder',
form:'form-control'
}),
},
watch: {
['form.data']: {
deep: true,
immediate: false,
handler: 'onFormChange'
},
editing:function(val){
if(val==true)
{
$('#bodyforum').summernote({
lang: 'fa-IR',
toolbar: [
['style', ['style']],
['font', ['bold', 'underline', 'clear']],
['color', ['color']],
['para', ['ul', 'ol', 'paragraph']],
['table', ['table']],
['insert', ['link', 'picture']],
['view', ['fullscreen', 'codeview']],
],
});
$('.dropdown-toggle').dropdown();
}
}
},
methods: {
onFormChange(after, before) {
this.form.validate()
},
editme() {
this.editing = true;
this.showeditor();
},
showeditor(){
$('#bodyforum').summernote({
lang: 'fa-IR',
toolbar: [
['style', ['style']],
['font', ['bold', 'underline', 'clear']],
['color', ['color']],
['para', ['ul', 'ol', 'paragraph']],
['table', ['table']],
['insert', ['link', 'picture']],
['view', ['fullscreen', 'codeview']],
],
});
$('.dropdown-toggle').dropdown();
},
update(){
if (this.form.validate().errors().any()) {
this.form.validate();
}
else {
axios.patch(this.url + '/replies/' + this.data.id, {
body: $('#bodyforum').summernote('code')
})
.then(response => {
this.editing = false;
flash('مطلب ویرایش شد.');
this.body=$('#bodyforum').summernote('code')
})
.catch(error => {
flash(error.response.data, 'danger');
});
}
},
destroy(){
axios.delete(this.url+'/replies/'+this.data.id);
this.$emit('deleted',this.data.id);
},
}
}
</script>
<style>
.errorborder{
border-color: red;
border-style:solid;
color:red;
}
.errortext{
color:red;
}
</style>
به صادق عمراني کمک کنید تا مشکل خودش را حل کند؛ اینطور میتوانیم با هم پیشرفت کنیم.
آیا مایل به ارسال نوتیفیکیشن و اخبار از طرف راکت هستید ؟