Question

我无法从created（）函数更新数据属性。我也尝试使用'this'，但我似乎超出了范围。有帮助吗？无论如何，兄弟组件在点击时发出信息，该组件应该接收并显示为数据，非常简单，但是当我尝试更新数据的主要属性时，它们总是保持不变。我是vue2的新手，所以任何帮助都会受到赞赏。

const singleAc = Vue.component('singleAc', {
template: `<div class="helper_text">
            <div>  Aircraft with ID : {{ $route.params.aircraftId }} </div>
            <div><img class="airline_logo" src="//logo.clearbit.com/Ryanair.com"></div>
            <div>  Model : {{modelName}} </div>
            <div v-if="fromAp">  From: {{fromAp}} </div>
            <div v-if="toAp">  To: {{toAp}} </div>
         </div>`,
data: function() {
    return {
        company: null,
        modelName: null,
        fromAp: null,
        toAp: null

    }
},
created() {
    bus.$on('op', function(op) {
        singleAc.company = op;
        console.log(op)
    })
    bus.$on('model', function(model) {
        singleAc.modelName = model;
        console.log(model)
    })
    bus.$on('from', function(from) {
        singleAc.fromAp = from;
        console.log(from)
    })
    bus.$on('to', function(to) {
        singleAc.toAp = to;
        console.log(to)
    })
}
});

Answer 1

暂时忘掉全球事件，尝试用props传递你的飞机数据那么你的组件应该通过添加：

来访问飞机数据

props: ['aircraft']

不要忘记指向飞机数据模型。它应该看起来像这样：

`<div :aircraft="aircraft" class="helper_text">
        <div>  Aircraft with ID : {{ aircraft.id }} </div>
        <div><img class="airline_logo" src="//logo.clearbit.com/Ryanair.com"></div>
        <div>  Model : {{aircraft.modelName}} </div>
        <div v-if="fromAp">  From: {{fromAp}} </div>
        <div v-if="toAp">  To: {{toAp}} </div>
     </div>`

希望它有所帮助。

Answer 2

singleAc是Vue组件，而不是Vue实例。这就是为什么更改像singleAc.company这样的数据无法正常工作的原因

您仍然需要使用this

解决方案1：use arrow functions so that this can be used

const singleAc = Vue.component("singleAc", {
    created() {
        bus.$on("op", op => {
            this.company = op;
            console.log(op);
        });
    }
});

解决方案2：将this存储在变量

中

const singleAc = Vue.component("singleAc", {
    created() {
        var _t = this;
        bus.$on("op", op => {
            _t.company = op;
            console.log(op);
        });
    }
});

希望这有帮助。

Answer 3

绑定这实际上解决了问题

<script>
function sendEmail()
{
    var notesDatabase;
    var notesSessiona;
    notesSessiona = new ActiveXObject("Notes.NotesSession");
    notesDatabase = notesSessiona.GETDATABASE("staralliancesupport", "");
    notesDatabase.OPENMAIL();
    var mailItem = notesDatabase.CreateDocument();
    mailItem.subject = te.value +" Outage"+" "+text11.value+tex111.value+tex11.value+tex21.value+tex31.value+tex41.value+tex51.value+tex61.value+tex71.value+tex81.value+tex91.value+" "+ text.value+" "+ tex.value+" session down"
    mailItem.sendto = "nathan.sabari@tcs.com";
    mailItem.copyto = textbox_1.value;
    mailItem.BlindCopyTo = "";
    mailItem.Body = "Dear All,\n\nNote: This e-mail is sent to Star Alliance member carrier contacts, their business partners and provider help desks.\n\nStar Alliance  would like to inform you about the "+ tex.value +" interruption between Star Alliance and-"+" "+te.value+" "+text11.value+tex111.value+tex11.value+tex21.value+tex31.value+tex41.value+tex51.value+tex61.value+tex71.value+tex81.value+tex91.value+" "+ text.value+".\n\nWe are liaising with the airline's service desk to get more information regarding this issue.\n\n--\n\nStar Alliance Support\nEmail support at:	Staralliance.support@tcs.com\nTelephone contact No: +1877 292 9784\n"
    mailItem.Send (0);
}
</script>

Vue.js更新组件中已创建函数的数据

3 个答案: