nodejs创建vue项目_vue数据不渲染

nodejs创建vue项目_vue数据不渲染tl;dr:GivenaVueJSVNodeobject,howdoIgettheHTMLelementthatwouldbegeneratedifitwererendered?e.g.:>temp1VNode{tag:”h1″,data:undefined,children:Array(1),text:undefined,elm:…

大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全家桶1年46,售后保障稳定

nodejs创建vue项目_vue数据不渲染

tl;dr:

Given a VueJS VNode object, how do I get the HTML element that would be generated if it were rendered?

e.g.:

> temp1

VNode {tag: “h1”, data: undefined, children: Array(1), text: undefined, elm: undefined, …}

> temp1.children[0]

VNode {tag: undefined, data: undefined, children: undefined, text: “Test”, elm: undefined, …}

> doSomething(temp1)

Test

Goal

I’m attempting to build a small VueJS wrapper around the DataTables.net library.

To mimic the behavior of HTML tables in my markup, I want something like the following:

NameAgeSalary

{
{ person.name }}{
{ person.age }}{
{ person.salary }}

What I’ve done so far

I’ve started to implement this as follows:

DataTable.vue

/* global $ */

export default {

data: () => ({

instance: null

}),

mounted() {

this.instance = $(this.$refs.table).dataTable();

this.$el.addEventListener(“dt.row_added”, function(e) {

this.addRow(e.detail);

});

},

methods: {

addRow(row) {

// TODO

console.log(row);

}

}

};

DataTableRow.vue

/* global CustomEvent */

export default {

mounted() {

this.$nextTick(() => {

this.$el.dispatchEvent(new CustomEvent(“dt.row_added”, {

bubbles: true,

detail: this.$slots.default.filter(col => col.tag === “td”)

}));

});

},

render() { return “”; }

};

What this currently does:

When the page loads, the DataTable is initialized. So the column headers are properly formatted and I see “Showing 0 to 0 of 0 entries” in the bottom left

The CustomEvent is able to bubble up past the

and be caught by the DataTable element successfully (circumventing the limitation in VueJS that you can’t listen to events on slots)

What this does not do:

Actually add the row

My event is giving me an array of VNode objects. There’s one VNode per column in my row. The DataTables API has an addRow function which can be called like so:

this.instance.row.add([“col1”, “col2”, “col3”]);

In my case, I want the resultant element from the rendering of the VNode to be the elements in this array.

var elems = [];

for (var i = 0; i < row.length; i++)

elems[i] = compile(row[i]);

this.instance.row.add(elems);

Unfortunately this compile method eludes me. I tried skimming the VueJS documentation and I tried Googling it, but no dice. I tried manually passing the createElement function (the parameter passed to the render method) but this threw an error. How can I ask VueJS to render a VNode without injecting the result into the DOM?

解决方案

I ran into the same issue wanting to do basically the same thing with a row details template for DataTables.net.

One solution could be to create a generic component that renders out a VNode and instantiate that programmatically. Here is how my setup for a dynamic detail row that I insert using datatable’s row.child() API.

RenderNode.js

export default {

props: [‘node’],

render(h, context) {

return this.node ? this.node : ”

}

}

Datatables.vue

Include the renderer component from above

import Vue from ‘vue’

import nodeRenderer from ‘./RenderNode’

Instantiate and mount the renderer to get the compiled HTML

// Assume we have `myVNode` and want its compiled HTML

const DetailConstructor = Vue.extend(nodeRenderer)

const detailRenderer = new DetailConstructor({

propsData: {

node: myVNode

}

})

detailRenderer.$mount()

// detailRenderer.$el is now a compiled DOM element

row.child(detailRenderer.$el).show()

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/234437.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)
blank

相关推荐

  • vs2010 sp1下载_vs2005下载

    vs2010 sp1下载_vs2005下载vs2005sp1下载地址、安装方法–更新非常慢2007年03月14日下午09:17(转)VS2005SP1发布,解决只能创建WebSite,无法创建WebApplication项目的问题

  • Java正则表达式的语法与示例

    Java正则表达式的语法与示例Java正则表达式的语法与示例正则表达式是什么?用我的理解就是一个表达式。用来匹配,替换,判断字符串,之前业务就出现过判断返回值是否为邮箱。以下内容来自于http://baike.xsoftlab.net/view/207.html#3java正则表达式正则表达式语法java正则表达式语法java正则表达式概要:Java正则表达式的语法与示例

  • 1082. 数字游戏(数位dp)[通俗易懂]

    1082. 数字游戏(数位dp)[通俗易懂]科协里最近很流行数字游戏。某人命名了一种不降数,这种数字必须满足从左到右各位数字呈非下降关系,如 123,446。现在大家决定玩一个游戏,指定一个整数闭区间 [a,b],问这个区间内有多少个不降数。输入格式输入包含多组测试数据。每组数据占一行,包含两个整数 a 和 b。输出格式每行给出一组测试数据的答案,即 [a,b] 之间有多少不降数。数据范围1≤a≤b≤231−1输入样例:1 91 19输出样例:918#include<bits/stdc++.h>usin

  • 网易云音乐如何将多个账号的音乐合并到一个账号

    网易云音乐如何将多个账号的音乐合并到一个账号

  • 代价函数 cost function

    代价函数 cost function代价函数在监督学习的回归问题中,代价函数就是用于找到最优解的目的函数,反应了预测函数的准确性。代价函数的值越小,说明在回归问题的中,计算机程序对数据拟合的越好。也就是假设函数越正确。比如,对于这个假设函数(可以看成是求房价的假设函数):代价函数是:也就是预测值与真实值的差的平方和,再除以2m(2倍样本数量)。在假设函数中:θ0和θ1两个参数,不同的参数会有不同的假设函数如下图

  • 上海市高校计算机考试准考证

    上海市高校计算机考试准考证大家好啊,距离22考研初试仅剩26天,现在这个时候,大家除了对知识点进行查缺补漏之外,也得关注一些关于考前的准备工作,还有考场的注意事项哦!因为地区的不同,考点的不同,监考老师的不同,考试的要求和规定也会有差异哦,所以大家在拿到准考证之后,一定要仔细查看考试考点的要求~#考研倒计时#打开腾讯新闻,查看更多图片>1、可不可以戴手表、手环?如果要戴手表,那必须是没有记忆及计算功能的,也就是机械表,手环算电子产品大概率是不可以带的,在进考场之前可以询问一下监考老师,确认一下是否可以带

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号