我在VueJs中遇到过css问题.对不起描述不好,但我不知道我做错了什么.
我的css in style scoped在vuejs中工作得很好,我通常可以解决idis和类.
问题是当我想要更改vuetify框架或wysiwyg编辑器元素的内部css的值时.我不明白,因为在codepen上一切正常.例如,我在这里将wysiwig编辑器的填充设置为0,它只是起作用(在codepen中):
模板:
<div class="container">
<div id="editor-container">
</div>
</div>
脚本
var quill = new Quill('#editor-container', {
modules: {
toolbar: [
[{ header: [1, 2, false] }],
['bold', 'italic', 'underline'],
['image', 'code-block']
]
},
placeholder: 'Compose the most wonderful and amazing epic you could ever imagine!',
theme: 'snow' // or 'bubble'
});
样式
.ql-editor {
padding: 0!important;
}
在我的vuejs SPA上,我正在粘贴完全相同的css代码,它什么也没做.我是正确的组成部分,正确的元素.在我的控制台中,当我正在检查时 - 我看到.q1-editor的属性为填充12px等.所以我的网站没有任何变化:(我很抱歉不好解释 - css不是我的主要语言.
也许对css有更多经验的人会知道我做错了什么.
我有一个包含可为空字段的数据库。当我通过 发送我的值时api resource，laravel 正在发送null值。我想得到空字符串。我该如何设置？
例子：
<?php
namespace App\Http\Resources;
use Illuminate\Http\Resources\Json\Resource;
class RequirementResource extends Resource
{
/**
* Transform the resource into an array.
*
* @param \Illuminate\Http\Request $request
* @return array
*/
public function toArray($request)
{
return [
'active' => $this->active,
'person' => $this->person, //sometimes has null value
'edit' => false,
'buttons' => false,
'text' => $this->text, //sometimes has null value
];
}
}
我想要一个 json 对象：
{"active": false, "person": "", "edit": false, "buttons": false, "text": …我有基本模板,通过双向数据绑定从wysiwyg编辑器输出文本,如下所示:
<template>
<div>
<quill-editor
v-model="debounceText"
:options="editorOptionProTemplate"
>
</quill-editor>
<div v-html="textComputed"></div>
</div>
</template>
<script>
data () {
return {
text: ''
}
},
computed: {
debounceText: {
get() { return this.text; },
set: _.debounce(function(newValue) {
this.text = newValue;
}, 100)
},
//using computed for many variants for styling output in web (here just adding <b> tag)
textComputed() {
return '<b>' + this.text + '</b>'
}
}
</script>
在这个级别一切正常
现在,我将变量转换为数组(对象),使用v-for(许多元素同时编辑并在数组中输出它们如下):
<template>
<div v-for="item in items">
<quill-editor
v-model="item.text"
:options="editorOptionProTemplate"
>
</quill-editor>
<div v-html="textComputedArray"></div> …我正在使用 laravel 资源发送我的 api
class OfferResource extends Resource
{
/**
* Transform the resource into an array.
*
* @param \Illuminate\Http\Request $request
* @return array
*/
public function toArray($request)
{
return [
'created_at' => $this->created_at,
];
}
}
这给了我（在 Laravel 5.6 上）一个对象：
created_at: {
date: "2018-05-10 18:49:15.000000",
timezone: "UTC",
timezone_type: 3
}
这是出乎意料的，因为在 laravel 5.5 上我有原始日期。但是，我尝试进行受保护的强制转换，如官方文档中所述：
protected $casts = [
'created_at' => 'datetime:Y-m-d',
];
这根本行不通。
我正在尝试根据我的消息表fromContact关系在我的联系人列表中创建一个数组：
$messages = Message::where('offer_id', $id)->get();
$contacts = array();
foreach($messages as $message){
$contacts[] = $message->fromContact;
}
接下来，我正在尝试使用 $unreadIds 制作联系人地图，这些 $unreadIds 是消息表上其他查询的结果：
$contacts = $contacts->map(function($contact) use ($unreadIds) {
$contactUnread = $unreadIds->where('sender_id', $contact->id)->first();
$contact->unread = $contactUnread ? $contactUnread->messages_count : 0;
return $contact;
});
这不起作用......我收到了简单的错误消息：
Call to a member function map() on array
我明白，我不应该在数组上使用 map() - 所以我尝试了很多方法将它转换为对象 - 都失败了。
例如在数组循环后将联系人转换为对象
$contacts = (object)$contacts;
给出错误： "message": "Call to undefined method stdClass::map()",
也许有人知道如何解决这个问题？
我正在使用laravel资源来获取api的数据:
return [
'id' => $this->id,
'unread' => $this->unread,
'contact' => UserResource::collection($this->users),
];
这工作正常.问题是'用户'是空的.我的意思是 - 不是每次我的控制器从我的关系中加载用户:
$offers = Offer::where('user_id', $user_id)->orderBy('created_at','desc')->get();
foreach ($offers as $offer)
{
$offer->setRelation('users', $offer->users->unique());
}
return OfferShortResource::collection($offers);
有时 - 这种关系不存在.但不是关系是问题,因为 - 我的资源没有加载关系 - relatin被加载到控制器内.
那么如何才能为资源添加某种逻辑呢？- 基本上说 - 用户属性可能不存在 - 然后不在这里加载数据,甚至 - 不检查$this->users关系
编辑:我试着这样做:
use Illuminate\Support\Arr;
...
'contact' => $this->when(Arr::exists($this, 'users'), function () {
return UserResource::collection($this->users);
}),
但这总是假的
编辑2:Offer模型中的关系
public function users(){
return $this->belongsToMany(User::class, 'messages', 'offer_id', 'from')
->where('users.id', '!=', auth()->user()->id);
我正在使用 js 对象，可以说：
items: [{text: 'text1', active: true},
{text: 'text1', active: true},
{text: 'text1', active: true}]
我想制作对象的副本并在计算属性中对它们进行一些更改，如下所示：
computed: {
copyAndChange() {
var itemsCopy = []
itemsCopy = this.items
for (var i=0; i<itemsCopy.length; i++) {
itemsCopy[i].text = "something"
console.log('text from items: ' + this.item[i])
console.log('text from itemsCopy: ' + itemsCopy[i])
}
return itemsCopy
}
}
这段代码在控制台中给了我：
text from items: something
text from itemsCopy: something
text from items: something
text from itemsCopy: something
text from items: something
text from itemsCopy: something
（？） …
我已经关闭了启动模态的按钮，如下所示：
<button id="back_offer_button" type="button" class="btn btn-default" data-dismiss="modal" data-toggle="modal" data-target="#addOffer">Go back</button>
我希望能够通过香草JavaScript将数据目标动态更改为其他位置：
例如现在是
data-target="#addOffer"
我想将其更改为
data-target="#addDifferentOffer"
所以我试图得到这个按钮：
var backOfferButton = document.getElementById('back_offer_button');
然后：
backOfferButton.data-target = "#addDifferentOffer" <?>
这当然是行不通的。应该如何正确书写？
我正在使用道具更新子组件中的站点内容。这基本上是这样工作的：
<child-component :updatedArray="updatedArray" />
然后在子组件中：
<template>
{{updatedArray}}
<div>{{computedArray}}</div>
</template>
<script>
props: ['updatedArray'],
...
computed: {
computedArray() {
if(this.updatedArray.item == "item one") {return "item one"}
else {return "other item"}
}
}
</script>
现在，当我updatedArray在我的父组件中更新时，这段代码应该可以在任何情况下工作。然后我在我的子组件中看到我{{updatedArray}}的正在正确更改，但我computedArray的未触发并且不起作用。
我能问你为什么会这样吗？计算是否不适用于每个道具更新？
我应该如何更正我的代码？
编辑：不重复我没有改变道具，我只是根据它的值进行计算。
我有一个非常基本的数组：
specialityTest: [{person:'nurse', text:'text1'},
{person:'nurse', text:'text1'},
{person:'physician', text:'text1'},
{person:'physician', text:'text1'}]
我正在尝试使用基本的过滤器功能对此进行过滤：
this.specialityTest.filter((person) => {
return (person =="physician")
})
然后复制过滤的数组：
methods: {
seedSpeciality(){
this.nurseListSpeciality2 = JSON.parse(JSON.stringify(this.specialityTest.filter(
(person) => {
return (person =="physician")
})))
},
}
这对我不起作用...我有错误：
Uncaught (in promise) TypeError: this.specialityTest.filter is not a function
at VueComponent.seedSpeciality (AddOfferDialog.vue?f4fc:1771)
at VueComponent.boundFn [as seedSpeciality]。
我在这里做错了什么？
编辑：我从api调用运行此功能：
fetchSpecialityArray(){
this.$http.get('http://127.0.0.1:8000/api/speciality')
.then(response => response.json())
.then(result => this.specialityTest = result).then(this.seedSpeciality.bind(this))
},