kazupon/vue-i18n

Missing translation if key is the same as a prototype function name

Open

#968 opened on Aug 11, 2020

View on GitHub
 (1 comment) (1 reaction) (0 assignees)JavaScript (7,181 stars) (886 forks)batch import
Type: Bughelp wanted

Description

It is possible to get string protoype function with the translate function. If you are using a plain object for the messages and the keys are looking like this

{ 
    "somekey": "Im a translation",
    "somekey.deep": "Im a translation which is deep",
    "somekey.link": "I do not work",
}

The translate function will return null if the last key is the same as a prototype function. For example somekey.link will always be empty. This is because the internal function getPathValue returns the protoype function itself.

vue & vue-i18n version

vue: 2.6.1 vue-i18n: 8.18.2

Reproduction Link

https://jsfiddle.net/MrWook/ukfdp8q1/3/

Steps to reproduce

Open the Reproduction Link and look at the rendered page

What is Expected?

The last translation key is translated as well.

What is actually happening?

The last translation key isn't translated.

Contributor guide

Tech stack
javascriptvue
Domain
frontend
Issue type
bug
DifficultyEstimated implementation difficulty for a new contributor, from 1 for very small changes to 5 for expert-level work.
2
Estimated timeA rough time range for an experienced contributor to investigate, implement, test, and prepare a pull request.
under 1 hour
Activity statusHow available the issue appears right now: fresh, active, stale, blocked, or waiting on maintainer input.
stale
ClarityHow clearly the issue explains the expected change, acceptance criteria, and next step.
clear
Prerequisites
JavaScript prototype chainvue i18n basics
Newbie friendlinessA 1-100 score estimating how approachable this issue is for first-time contributors.
70
Research direction
Examine the `getPathValue` function in the vue i18n source code (likely in `src/index.js` or `src/path.js`). The issue arises because property access via dot notation (e.g., `obj['somekey']['link']`) returns the prototype function `link` from `Object.prototype`. To fix, use `Object.prototype.hasOwnProperty.call(obj, key)` before each property access. The provided JSFiddle (https://jsfiddle.net/MrWook/ukfdp8q1/3/) reproduces the bug. No linked PRs or assignees, so the fix is straightforward.