link1918 link1919 link1920 link1921 link1922 link1923 link1924 link1925 link1926 link1927 link1928 link1929 link1930 link1931 link1932 link1933 link1934 link1935 link1936 link1937 link1938 link1939 link1940 link1941 link1942 link1943 link1944 link1945 link1946 link1947 link1948 link1949 link1950 link1951 link1952 link1953 link1954 link1955 link1956 link1957 link1958 link1959 link1960 link1961 link1962 link1963 link1964 link1965 link1966 link1967 link1968 link1969 link1970 link1971 link1972 link1973 link1974 link1975 link1976 link1977 link1978 link1979 link1980 link1981 link1982 link1983 link1984 link1985 link1986 link1987 link1988 link1989 link1990 link1991 link1992 link1993 link1994 link1995 link1996 link1997 link1998 link1999 link2000 link2001 link2002 link2003 link2004 link2005 link2006 link2007 link2008 link2009 link2010 link2011 link2012 link2013 link2014 link2015 link2016 link2017 link2018 link2019 link2020 link2021 link2022 link2023 link2024 link2025 link2026 link2027 link2028 link2029 link2030 link2031 link2032 link2033 link2034 link2035 link2036 link2037 link2038 link2039 link2040 link2041 link2042 link2043 link2044 link2045 link2046 link2047 link2048 link2049 link2050 link2051 link2052 link2053 link2054

[Vue.js] Getting generated view with MVC on Docker

there is a dotnet core application with authorization. Because company policy does not allow to store Bearer tokens on the front-end, to run it through an MVC Controller. However, when running a SPA with Vue.js which is generated. So there is to return the generated index.cshtml from the Controller. This works locally in Kestrel, but once I deploy it to a Docker container it doesn’t work anymore — I suppose it has something to do with the way MVC expects files to be somewhere and this doesn’t match how Docker handles it.

I’ve tried various ways to find the file on the pod. The app runs standard in /app; and the SPA was initially deployed to /app/wwwroot. I couldn’t find a way to make the MVC Controller read from that folder. I changed the vue.js webpack to create an Index.cshtml and all required assets under /app/View/[ControllerName] but that didn’t work either.

Dockerfile:

FROM microsoft/dotnet:2.2-aspnetcore-runtime

EXPOSE 80

# Create app directory
WORKDIR /app

# Copy files from the artifact staging folder on agent
COPY <ProjectName>/out .

RUN apt-get update -y && apt-get install ca-certificates -y && rm -rf /var/lib/apt/lists/*
ADD certificate.crt
ADD certificate2.crt
ADD certificate3.crt
RUN update-ca-certificates

ENTRYPOINT [“dotnet”, “<ProjectName>.dll”]

Expected result: the SPA loads.
Actual results: often MVC errors that it couldn’t find the index.cshtml file in various locations. And it’s always looking at the wrong locations, even though I’m trying to point it in the right direction. That was with trying to point at the vue.js under /app/wwwroot; with the SPA being generated under /Views/[ControllerName] it appears the buildserver isn’t building it correctly to place it there and other strange things happen. At one time, apparently, it generated a HomeController; which the project doesn’t have.

Solution :

I’ve been fidgeting around and I’ve ended up simply grabbing the generated file and return that as a response.

public ActionResult Index()
{
try
{
var fileStream = new FileStream(“/app/wwwroot/index.html”, FileMode.Open);
return File(fileStream, “text/html; charset=utf-8”);
}
catch (Exception ex)
{
_logger.LogError($”Kon /app/wwwroot/index.html niet openen”, ex);
}

return StatusCode(500);
}

[Vue.js] Alternative for component () => import in VueJs routing

I downloaded a template online to better understand VueJs and also create a web app. However there is a problem with routing. There is a function in my router’s index.js that imports a path. The import syntax seems to be buggy due to some webpack issues. I tried a lot of different things but couldn’t fix the bug so to find a workaround for that import syntax

This is my code for router’s index.js

import vue.js from ‘vue’
import VueAnalytics from ‘vue-analytics’
import Router from ‘vue-router’
import Meta from ‘vue-meta’

// Routes
import paths from ‘./paths’
// import views from ‘./views’

function route (path, view, name) {
return {
name: name || view,
path,
component: () => import(
`../views/${view}.vue`
)
}
}

Vue.use(Router)

// Create a new router
const router = new Router({
mode: ‘history’,
routes: paths.map(path => route(path.path, path.view, path.name)).concat([
{ path: ‘*‘, redirect: ‘/home’ }
]),
scrollBehavior (to, from, savedPosition) {
if (savedPosition) {
return savedPosition
}
if (to.hash) {
return { selector: to.hash }
}
return { x: 0, y: 0 }
}
})

Vue.use(Meta)

// Bootstrap Analytics
// Set in .env
// https://github.com/MatteoGabriele/vue-analytics
if (process.env.GOOGLE_ANALYTICS) {
Vue.use(VueAnalytics, {
id: process.env.GOOGLE_ANALYTICS,
router,
autoTracking: {
page: process.env.NODE_ENV !== ‘development’
}
})
}

export default router

When i try to build it, I get an error saying:

ERROR in ./src/router/index.js
Module build failed: SyntaxError: C:/djangoProjects/martin - Copy/martin/src/router/index.js: Unexpected token (15:21)

The syntax error is on line (15:21), in the route function on the component: () => import( line and exactly on import. Fixing this issue is a pain so I was wondering if there is a workaround for it without using the import syntax?

Solution :

If I remember correctly you’ll need a plugin for babel that can handle dynamic imports.

Check out:
https://babeljs.io/docs/en/babel-plugin-syntax-dynamic-import

Run npm install @babel/plugin-syntax-dynamic-import
Create or open .babelrc

{
“plugins”: [“@babel/plugin-syntax-dynamic-import”]
}

[Vue.js] How to remove padding of List item in vuetify

When coding vue.js project with vuetify, I found there are useless padding in <v-list> tag, in detail, it is about <v-list-tile> tag.

image: https://segmentfault.com/img/bVbtemC?w=890&h=1288

There are one parent list item and one child list item, and there are some padding space in left and right.

there is followed official methods to set class=”pa-0”, however, it does not work when I add this class to all the tags around.

And of course set CSS directly does not work too, the image above shows that the target tag is the one with class=”v-list__tile”, but CSS on this class still does not work.

<v-navigation-drawer width=”200px” stateless value=”true”
class=”transparent”>
<v-list subheader dense expand>
<v-list-group no-action>
<template v-slot:activator>
<v-list-tile class=”pa-0”>
<v-icon left>home</v-icon>
<v-list-tile-title>menu-name-m</v-list-tile-title>
</v-list-tile>
</template>

<v-list-tile class=”pa-0” @click=”onMenuCliked”>
<v-list-tile-title>no child - menu-name</v-list-tile-title>
</v-list-tile>

</v-list-group>
</v-list>
</v-navigation-drawer>

This is my code partly, it is in vue-cli.

I know remove no-action in <v-list-group> tag works on child list item, but it is not the way I want, and this does not work on the parent one.

I hope I can control the green padding in the image above, or juest remove it.

Solution :

v-list-item renders the following html

<div role=”listitem”>
<div class=”v-list__tile theme–light”>

</div>
</div>

So setting the class appends it to the parent div, instead of v-list__tile - which is the actually div with the padding.
Sometimes vuetify way around this is using the content-class prop instead, but this component does not seem to support it, so you gotta target it by css, for example

.v-list__tile {
padding: 0
}

You could still use class if you want more specificity:

<v-list-tile class=”my-tile”>

.my-tile .v-list__tile {
padding: 0
}

If it’s not working and you are using scoped styles, see more

[Vue.js] Vue js form submission method

I’m relatively new to Vuejs & am trying to get this form working but it keeps showing me these errors when i submit. Can anyone guide me on this?

<template>
<form @submit.prevent=”handleSubmit”>
<input class=”input” type=”text” v-model=”user.name”>
<input class=”input” type=”text” v-model=”user.email”>
<input class=”input” type=”text” v-model=”user.phone”>
<button class=”button is-primary” type=”submit”>Submit</button>
</form>
</template>

<script>
export default {
data() {
return {
user: {
name: ‘’,
email: ‘’,
phone: ‘’
},
test: “BEFORE SUBMIT”
};
},
method: {
handleSubmit() {
let user = new user({
name: this.user.name,
email: this.user.email,
phone: this.user.phone,
});

this.test = “AFTER SUBMIT”;
}
}
};
</script>

Solution :

You’re calling handleSubmit method but you haven’t defined it on the vue.js instance.

That’s because you should call the vue.js instance property methods, not method, even when you have only 1 method.

[Vue.js] pass index to child event listener in parent component in vuejs

there is a list of objects within a v-for loop:

<div v-for=”(element, index) in myArray”>
<child @event-fired=”handleEvent(index, dataFromChild)”></child>
</div>

Now once the event is fired from the child component, on my handleEvent method, pass the index and the data from the child component.

But now, if I do something like stated above,I get an error on console stating, property or method dataFromChild is not defined….

Solution :

You can bind an arrow function expression in the event handler. For example

<child @event-fired=”dataFromChild => handleEvent(index, dataFromChild)”/>

JSFiddle demo (from the vue.js boilerplate) ~ https://jsfiddle.net/zmxksv35/

Solution 2:

Just pass everything into the event handler as a single object.

<div v-for=”(element, index) in myArray”>
<child @event-fired=”data => handleEvent({ index, data })”></child>
</div>

Then, in the event handler, you can destructure it:

handleEvent({ index, data }) {
// handle the event
}

[Vue.js] Find better way to see if object has filled fields

I got filter in vue.

Template:

<b-button v-if=”filterFilled()” @click=”clearFilter”>
Clear
</b-button>

Data:

data () {
return {
filter: {
price_from: ‘’,
price_to: ‘’,
surface_from: ‘’,
surface_to: ‘’,
floor: ‘’,
type: ‘’,
structure: ‘’,
},
}
},

And my method where i check is filter dirty:

filterFilled(){
return (this.filter.price_from || this.filter.price_to || this.filter.surface_to || this.filter.surface_from ||
this.filter.floor || this.filter.type || this.filter.structure)
},

This works fine, but my question is, does it exists better way to ask if object has filled props?

Solution :

You could check if this.filter has at least one truthy value using some

filterFilled() {
return Object.values(this.filter).some(v => v)
}

Solution 2:

Apart from @adiga suggestion, for methods that checks over data in the component, you should generally prefer computed properties over methods, since they are more performant and only called when some of its dependencies change:

data () {
return {
filter: {
price_from: ‘’,
price_to: ‘’,
surface_from: ‘’,
surface_to: ‘’,
floor: ‘’,
type: ‘’,
structure: ‘’,
},
}
},
computed: {
filterFilled() {
// as in @adiga answer, which is great
return Object.values(this.filter).some(v => v);
}
}

[Vue.js] Cannot get DOM events on component in host component

there is a vue.js component that contains a list of objects named lines. I build a table from those lines using different components based on the line type. This works perfectly. Here’s a stripped down version of the component:

<template>
<table>
<tr v-for=”line in lines”
:key=”line.key”
:is=”componentForType[line.eventType] || ‘LogLine’”
v-bind=”line”
/>
</table>
</template>

<script>
export default {
name: ‘DebugLog’,
components: {
LogLine,
FormattedLogLine,
UserDebug,
Limits
},
data () {
return {
lines: [],
selectedKey: null,
componentForType: {
‘USER_DEBUG’ : ‘UserDebug’,
‘LIMIT_USAGE_FOR_NS’ : ‘Limits’,
‘EXCEPTION_THROWN’ : ‘FormattedLogLine’,
‘FATAL_ERROR’ : ‘FormattedLogLine’
}

}
},
mounted() {
// code that loads this.lines
}
}
</script>

Now to be able to click any row of the table, and have the row become “selected”, meaning that store line.key in this.selectedKey and use CSS to render that line differently. But I can’t get the events working. Here’s the updated <template>; nothing else is changed:

<template>
<table>
<tr v-for=”line in lines”
:key=”line.key”
:is=”componentForType[line.eventType] || ‘LogLine’”
v-bind=”line”
:class=”{selected: line.key == selectedKey}”
@click.capture=”selectedKey = line.key”
/>
</table>
</template>

I’ve added the last 2 properties on the tr element - a dynamic class binding and a click event handler to set this.selectedKey to the active line’s key. But it isn’t working. I replaced the @click handler code with console.log(line.key) and nothing is logged, which tells me that my @click handler is never firing. I originally wrote it with out the .capture modifier, but tried adding the modifier when the original didn’t work.

Is vue.js stopping propagation from the child component to the parent? Can I not bind the click event on the tr since it :is another vue.js component? Or is there something else going on? The examples I’ve found in the docs are much simpler and I’m not sure they correspond to my situation. The various child components are not binding any click events. I’d prefer to handle the event entirely in the parent as shown, since I will have a number of types of child component, and I don’t want to have to implement click handlers in each.

Update: Looking at my child components, I note that each contains a tr tag that must effectively replace the tr in the parent template. For example, my most basic component is LogLine, shown here:

<template>
<tr>
<td>{timeStamp}</td>
<td>{eventType}</td>
<td>{lineNumber}</td>
<td>{lineData}</td>
</tr>
</template>

<script>
export default {
name: ‘LogLine’,
props: [‘timeStamp’, ‘eventType’, ‘lineData’, ‘lineNumber’],
data: function () {
return {}
}
}
</script>

So I’m guessing that the binding in the parent isn’t actually binding on the tr in the DOM; it’s just binding on the vue.js component, listening for a click event to be sent from the child with $emit; and that each child component will need to bind @click on its tr and emit it to the parent. Assuming I’m right, is there any shortcut I can use from the parent template to have vue.js forward the DOM events? Any other option I’m missing besides binding click in every child component?

Solution :

Piggy-backing off of Jacob’s answer here. Since you’re essentially attaching an event listener to a dynamic component it expects a custom click event. So you have two options here:

1) Listen for the native DOM click event within that component (by attaching a click event listener to a normal DOM element within the component) and emit a custom click event to the parent.

2) Use the .native modifier to listen for the native DOM click event instead of a custom one directly in the parent.

Solution 2:

Since you are using an :is prop, it’s considered a dynamic vue.js component, not a DOM element.

Events listener on a vue.js component won’t be passed down to its DOM element by default. You have to do it manually by going into the component template and add v-on=”$listeners”.

demo: https://jsfiddle.net/jacobgoh101/am59ojwx/7/

e.g. <div v-on=”$listeners”> … </div>

Solution 3:

@Jacob Goh’s use of v-on=”$listeners” is simple and allows forwarding of all DOM events in one action, but I wanted to document an approach I tried on my own for completeness. I will be switching to Jacob’s solution in my component. when now using Husam’s .native modifier in the parent as it is more suitable to my particular use case.

I was able to make my component work by editing each child component, capturing the click event and re-emitting it. For example:

<template>
<tr @click=”$emit(‘click’)”>
<td>{timeStamp}</td>
<td>{eventType}</td>
<td>{lineNumber}</td>
<td>{lineData}</td>
</tr>
</template>

<script>
export default {
name: ‘LogLine’,
props: [‘timeStamp’, ‘eventType’, ‘lineData’, ‘lineNumber’],
data: function () {
return {}
}
}
</script>

[Vue.js] How to get elementById in Nativescript?

I’m using nativescript with vue.js and I’m trying to do something like DOM operation. This is sample code from my template:

<Label textWrap=”true”>
<FormattedString id=”formString”
backgroundColor=”yellow”
effectiveHeight=”100”
effectiveWidth=”100%”>
<Span text=”This text has a “ />
</FormattedString>
</Label>

to get tag element FormattedString by his id - formString
In javascript is like this:

let fs = doument.getElementById(‘formString’);
How can I do this in Nativescript-Vue?
I know that there is library nativescript-dom, but I don’t want to use whole library for simple getById.

Solution :

Use Label.getViewById(formString) to access the attributes of FormattedString.

getViewById is the nearest equivalent to the javascript getElementById

Hope this helps

[Vue.js] How to do correct message passing between popup.js and background.js?

My extension should work like this:
Some data send from popup.js to background.js, in background.js I work with some web api services. And after that I send new data from background.js to popup.js for show in popup.html.

But if I after send from popup.js to background.js I close and open popup.html than data from background.js can’t get popup.js because port doesn’t exist.

I tried use localstorage. But my popup.html write on vue.js and localsorage for vue.js is not react and my data don’t updates in popup.html if my popup.html was not closed/open.

How to do correct message passing?

Solution :

You are looking for VueX, which role is to store data for all the application.

https://vuex.vuejs.org/

[Vue.js] How to mock the JavaScript window object using Jest?

I need to test a function which opens a new tab in the browser

openStatementsReport(contactIds) {
window.open(`a_url_${contactIds}`);
}

I would like to mock the window’s open function so I can verify the correct URL is passed in to the open function.

Using Jest, I don’t know how to mock the window. I tried to set window.open with a mock function but this way doesn’t work. Below is the test case

it(‘correct url is called’, () => {
window.open = jest.fn();
statementService.openStatementsReport(111);
expect(window.open).toBeCalled();
});

but it gives me the error

expect(jest.fn())[.not].toBeCalled()

jest.fn() value must be a mock function or spy.
Received:
function: [Function anonymous]

what should I do to the test case? any suggestions or hints are appreciated

Solution :

Instead of window use global

it(‘correct url is called’, () => {
global.open = jest.fn();
statementService.openStatementsReport(111);
expect(global.open).toBeCalled();
});

you could also try

const open = jest.fn()
Object.defineProperty(window, ‘open’, open);

Solution 2:

We can also define it using global in setupTests

// setupTests.js
global.open = jest.fn()

And call it using global in the actual test:

// yourtest.test.js
it(‘correct url is called’, () => {
statementService.openStatementsReport(111);
expect(global.open).toBeCalled();
});

Solution 3:

You can try this:

import * as _Window from “jsdom/lib/jsdom/browser/Window”;

window.open = jest.fn().mockImplementationOnce(() => {
return new _Window({ parsingMode: “html” });
});

it(“correct url is called”, () => {
statementService.openStatementsReport(111);
expect(window.open).toHaveBeenCalled();
});

Solution 4:

In the jest config add setupFilesAfterEnv: [“./setupTests.js”], create that file and add the code you want to run before the tests

//setupTests.js
window.crypto = {
…..
};

Ref: https://jestjs.io/docs/en/configuration#setupfilesafterenv-array